webpack原本是用来打包js文件的，只认js，有了loader后，他就开了二郎神天眼，也认识css等文件。现在他又有了 plugins，他就有了金箍棒，使得在打包的同时可以压缩、编译ES6，可以干更多的事情
第一步：cnpm安装
mkdir webpack-demo && cd webpack-demo cnpm init -y cnpm install webpack webpack-cli --save-dev
第二步：创建目录结构如下，其中dist和src目录需要手动创建
webpack-demo |- package.json |- /dist |- index.html
|- /src |- index.js
index.html和index.js内容如下：
<!doctype html> <html> <head> <meta charset="utf-8" /> <title>测试</title> <script src="./bundle.js"></script> </head> <body> <script></script> </body> </html>
import $ from 'jquery'; $(document).ready(function(){ console.log("哈哈") })
第三步：
执行：cnpm isntall jquery
在webpack-demo下新建webpack配置文件：webpack.config.js
webpack.config.js
const path = require('path'); //引入依赖
const uglify = require('uglifyjs-webpack-plugin'); //引入依赖
module.exports = {
entry: './src/index.js', //你要打包文件的开头，如果这个文件还引入其他文件，则也会被识别打包
output: {
filename: 'bundle.js', //生成打包后的文件的名字
path: path.resolve(__dirname, 'dist') //生成的打包后的文件你想把它放的地方
},
plugins: [ //这是金箍棒
new uglify() //压缩
]
};
运行：
npx webpack --config webpack.config.js后，在dist得到打包完的文件：
使用chrome运行：
webpack导致中文乱码？不对，webpack默认以utf-8编码打包，原来是记事本的输入中文的问题，我改用编辑器输入，如下：
打包成功！
坑：
第一次npx时，出现：Path must be a string. Received undefined ... ，发现原来是dist目录不存在。