Webpack模块打包原理、项目中的配置

###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