1.nodejs环境，建议下载v8.2以上版本的，低版本怕是有些api已经废弃，链接附上（https://npm.taobao.org/mirrors/node/）
2.网上一些教程有的是webpack3.x的 npm install webpck -D 这样下载的是最新版，也就是webpack4.x，4.x版本有些配置还是跟3.x的有区别的
3.我这里选择4.x版本的
4.webpack4.x版本默认的entry入口文件夹是src
(1)创建好webpack-test项目根目录（这里注意根目录命名不能是webpack，因为会跟后面要下载的webpack冲突），
(2)创建src文件夹，src文件夹放idnex.html、index.js文件
(3)执行npm init 一路回车 创建package.json文件
5.执行npm i webpack webpack-cli -D
这条指令的意思是：下载webpack 跟webpack-cli 并创建package.json的开发环境依赖，(webpack4.x开始必须另外下载webpack-cli)
（npm install webpack --save-dev、npm install webpack-cli --save-dev 这两条指令简写并且合并成 就等于npm i webpack webpack-cli -D）
有必要在说明下为什么不是npm install webpack --save,而是npm install webpack --save-dev
一般对于一个项目来说，就必须涉及到开发环境跟生产环境（线上环境），一些依赖包要跟着发布到线上 那就用npm install webpack --save
这里我们的webpack跟webpack-cli包是作为代码打包工具，只是负责打包代码，而我们只需要把打包好的代码放到生产环境上，仅此而已！因此这两个包只需要在开发环境使用就行
打开package.json文件可以在devDependencies（开发环境依赖包放在这里）属性看到安装的那两个包 ----------------【dependencies（生产环境依赖包放在这里）】
6.先以webpack4.x默认的配置打包代码，
在当前项目根目录下打开cmd运行打包指令 npx webpack
webpack会自动在根目录下生成dist文件夹跟main.js，文件里面的内容就是index.js被webpack打包后的代码，
如果想看到不被混淆的代码 可以执行 npx webpack --mode development
我们把main.js引入到index.html中 用浏览器打开index.html文件，调试模式下console面板将会看到输出的helloworld，就说明打包后的js文件是可以正常执行的！
7.以默认配置来打包我们的代码肯定是满足不了用户实际需求的，这就要我们结合webpack文档来自己配置打包参数
我们先在项目根目录下创建webpack.config.js ，并以webpack官方文档作为参考，来进行配置
8.执行 npx webpack打包代码，这时候，就会在根目录下生成dist文件夹，这是我们配置的输出目录，里面存放所有打包好的文件
在index.html页面上手动引用它，如果想自动引用，就必须另外用插件来实现
这时候html-webpack-plugin插件就派上用场了。也安一下 npm install html-webpack-plugin -D
附上代码：
const path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin'); // 这里导入HtmlWebpackPlugin插件
module.exports = {
entry: { // 指定一个入口文件 （也可指定多个）
index:'./src/index.js',
},
mode:'development', // 不会压缩代码 production 压缩代码
output: { // 出口文件
// 指定文件名跟输出文件到哪个位置
filename: '[name].js', //这里的name就是entry的index
path: path.resolve('dist')
},
plugins: [
// 通过new一下这个类来使用插件
new HtmlWebpackPlugin({
// 在src目录下创建一个index.html页面当做模板来用
template: './src/index.html',
filename:'index.html', //打包输出的html文件名
chunks:['index'] // 引用 entry 的index:'./src/index.js' 打包后的index.html 就会自动引用打包好的index.js
})
]
}
9. npx webpack打包代码
这时候，dist文件夹就会生成两个文件，一个是index.html,一个是index.js
打开index.html 就会看到index.js已被自动引入
10.但如果在src下有其他文件也需要打包呢？往下看！
const path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin'); // 这里导入HtmlWebpackPlugin插件
module.exports = {
entry: { // 指定多个入口
index:'./src/index.js',
login:'./src/login.js',
},
mode:'development', // development-->不会混淆代码 production---->混淆代码
output: { // 出口
// 指定文件名跟输出路径
filename: '[name].js', //这里的name就是entry的index跟login
path: path.resolve('dist')
},
plugins: [
new HtmlWebpackPlugin({
// 引用src目录下的index.html页面当做模板
template: './src/index.html',
filename:'index.html', //打包后的模板文件名
chunks:['index'] // 引用 entry 的index:'./src/index.js' 打包后index.html就会自动引用index.js
}),
new HtmlWebpackPlugin({
// 应用src目录下的login.html页面当做模板
template: './src/login.html',
filename:'login.html', //打包输出的模板文件名
chunks:['login'] // 引用 entry 的login:'./src/login.js' 打包后login.html 就会自动引用login.js
})
]
}
11.npx webpack
12.如果想两个html共用index.js
·················END································
webpack一些简单的使用先写到这样，css、图片的打包跟压缩会另外写一篇。
【注】
看网上别人有说直接在cmd上运行webpack就能打包，但我自己试了，是会提示：“无法将“webpack”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写，如果包括路径，请确保路径正确，然后再试一次。”
这是因为webpack、webpack-cli不是全局安装 ，必须 全局安装 npm i webpack webpack-cli -g (webpack 4.x版本后还必须安装webpack-cli)
如果你不想全局安装webpack、webpack-cli ，可以在package.json文件配置命令，以后直接 运行npm run build 就相当于执行webpack命令打包代码
