###Webpack:模块打包原理
1、新建package.json
npm init -y
2、下载依赖 node_modules
npm install --save-dev webpack
3、根目录下新建:index.html
4、新建:src–>css,js,images;新建:js–>index.js add.js
index.js 唯一入口文件
var add = require('./add').add;
add(1,3);
add.js
module.exports = {
add: function(){
console.log(a+b);
}
}
5、新建assets文件夹(放置生产环境代码)
6、入口文件导出至assets
执行 D:\wpk2>webpack src/js/index.js assets/js/index.js
7、新建webpack.config.js
webpack.config.js配置:
module.exports = {
entry: __dirname + '/src/js/index.js',//唯一入口文件,_driname:本地路径
output: {
path: __dirname + '/assets/js',//导出地址
filename: 'index.js'
}
}
执行 D:\wpk2>webpack
说明:webpack会自动搜索webpack.config.js文件,发现与6执行命令有相同效果
8、修改package.json
"test": "echo \"Error: no test specified\" && exit 1"-->"start": "webpack"
执行 D:\wpk>npm run start(可省略run)
说明:发现与6、7执行命令有相同效果
###Webpack:项目中的配置
1、package.json
2、build–>dev-server.js
3、webpack.dev.conf.js
4、webpack.base.conf.js
5、config–>index.js