安装nodejs:http://nodejs.cn/download/
打开命令行,在全局安装webpack:
$npm i webpack -g
切换到自己的目录下新建工程目录并进入:
$mkdir webpack-demo
$cd webpack-demo
在当前路径安装webpack并初始化项目:
$npm i webpack --save-dev
$npm init
建立一些目录disk,src和初始化文件:index.html,建立配置文件:webpack.config.js,结果是下面这样的:
disk是存放生成打包后的文件的地址,src是本地文件的地址。
在src下新建scripts文件夹保存js文件,新建style文件夹保存css文件。
在scripts文件夹下新建main.js文件。
在webpack.config.js文件中可配置webpack:
module.exports = {
entry:'./src/scripts/main.js',
output:{
path:'./dist/js',
filename:'[name].js',
},
在命令行运行
$webpack
在dist的js文件夹就会生成一个同名的js文件。
我们也可以在package.json文件中配置webpack,在package.json的scripts属性里加上webpack:
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"webpack":"webpack --config webpack.config.js"
}
这样,我们就可以在命令行运行:
$npm run webpack
来替代webpack命令。
在entry中也可以定义一个数组:
module.exports = {
entry:['./src/scripts/main.js','./src/scripts/a.js']
output:{
path:'./dist/js',
filename:'bundle.js',
},
在scripts目录下新建a.js文件,在命令行运行
$ npm run webpack
就会将main.js和a.js打包进bundle.js里。
entry还可以定义成一个对象:
entry:{
main:'./src/scripts/main.js',
a:'./src/scripts/a.js'
}
运行npm run webpack得到的结果是跟上面数组行的的entry一样。
在output中的filename有三个值:[name]、[hash]、[chunkhash],修改output:
module.exports = {
entry:{
main:'./src/scripts/main.js',
a:'./src/scripts/a.js'
},
output:{
path:'./dist/js',
filename:'[name]-[hash].js'
}
}
运npm run webpack输出的结果是在dist/js文件夹下生成两个带hash值的main.js和a.js文件。hash值是为了保持文件的唯一性。chunkhash是entry文件对应的hash值。
例如,我们指定chunkhash:
module.exports = {
entry:{
main:'./src/scripts/main.js',
a:'./src/scripts/a.js'
},
output:{
path:'./dist/js',
filename:'[name]-[chunkhash].js'
}
}
我们修改a.js的内容后运行webpack,输出的结果可以看到a.js的hash值是不同的,而未修改的main.js的hash值仍保持一致。这对项目中静态资源的版本管理是很有帮助的,我们可以只上传修改过的文件,其他的文件不会受到影响。
在webpack中还可以指定watch自动检测文件变化并同步这些变化。用法:
$ webpack –watch
或者在package.json的scripts属性里添加:
“webpack”: “webpack –config webpack.config.js –watch”
然后运行:
npm run webpack