1、webpack的配置文件webpack.config.js
module.exports = {
entry:'./src/script/main.js',
output:{
path:'./dist/js',
filename:'bundle.js'
}
}
上面代码是一个最最基本的webpac配置文件,entry
是指定要打包的入口文件,output
指定打包之后文件的路径和文件名。
(其中几个目录请手动新建:src是放我们源码的文件夹,dist是放我们编译后文件的文件夹。)
有了基本的webpack.config.js
,我们用webpack来打包就简单了,可以直接执行下面命令:
webpack
webpack默认就会去寻找根目录下的webpack.config.js文件。
打包成功,dist/js
文件夹下就会生成一个bundle.js
。
2、我们也可以指定webpack的配置文件名
webpack.config.js
是webpack默认的配置文件名,如果我们有一个webpack.dev.config.js
配置,又如何让webpack来读取它呢?
只需要在执行打包命令的时候,加一个参数:
webpack --config `webpack.dev.config.js
3、webpack配合npm
还记得我们在npm init
初始化之后,生成了一个package.json
文件么?我们现在终于要用到它了。
我们在这个文件中,增加一个scripts
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"webpack": "webpack --config webpack.config.js"
},
上面我们增加了一个webpack
项,我们可以看出其值其实也是执行的webpack命令。
既然我们是要webpack和npm配合,那么上面的配置到底有什么作用呢?
我们可以通过npm来调用webpack来,执行下面命令,同样完成webpack打包操作:
npm run webpack
npm run xxxx
,其中xxxx
就是我们上面配增加的scripts命令。
4、webpack配置的entry
entry
是webpack打包的入口指示。
它有三种形式:
1)、最简单的就是一个string,也是只有一个入口文件。我们前面已经见识了。
entry:'./src/script/main.js',
这种形式,你的所有的依赖,都在这个文件main.js
中引入进来。
2)、数组的形式
entry:['./entry1','./entry2']
3)、对象的形式
entry: {
page1:'./page1',
page2:['./entry1','./entry2']
}
2个入口。
5、webpack配置的output
我们先来回顾一下,我们在执行webpack打包命令之后,终端会输出:
Hash: 0bd4f09244f0e8c60354
Version: webpack 2.2.1
Time: 57ms
Asset Size Chunks Chunk Names
bundle.js 2.51 kB 0 [emitted] main
[0] ./src/script/main.js 0 bytes {0} [built]
然后我们把webpack.config.js中output
段修改如下:
output:{
path:'./dist/js',
filename:'[name]-[hash].js'
}
这样我们打包之后的文件就是main-本次打包的hash值.js
。
还可以:
filename:'[name]-[chunkhash].js'
这其中的hash值,我们可以认为是版本号,也就是说,只有在我们的文件改变了的时候,这个hash值才会有变化。