webpack的三种用法

1.直接命令行使用。
2.node.js API的使用方式。
3.webpack / webpack--config webpack. dev.config.js

 

 

//根目录创建 webpack.config.js
//根目录参数 moule.export={
entry : './src/script/main.js', //打包从这个js开始 入口文件
output：{
path: './dist/js' , //打包后放在那个文件 自动生成
filename:'bundle.js' //文件名
}
}
一、entry
1、三种输入方式
（1）string，输入字符串
entry:{
main:'./src/script/main.js'
},
（2）array, 数组。适用情况：两个平行的，不相依赖的文件打包在一起。
entry:{
main:['./src/script/main.js','./src/script/a.js']
},
（3）object, 适用情况：多页面应用程序。这里要和output里的[name]占位符配合使用，威力才能最大。如果你要打包成多 个js文件，那么entry对象里的key叫做chunk就是文件名，里面的值就是需要打包的文件里面包含的文件。
entry:{
main:'./src/script/main.js',
a:'./src/script/a.js'
},
二、output
1、占位符有3种：[name]、[hash]、[chunkhash]
2、output的filename
（1）hash: 这次打包的hash
每次终端运行webpack命令，都会生成一段信息，这段信息的第一行就有一个hash
（2）chunkhash:每一个chunk自己的hash
3、output的path，//这里配置的是输出的文件地址

npm install css-loader style-loader --save-dev

------------------------------------------------------------------------------

 webpack --watch

webpack hello.js hello.bundle.js
C:\Users\Administrator\Desktop\tiger\webpack-test