webpack升级到4之后，极大简化了初始化一个项目的过程，它默认不需要配置文件，但其实是不用配置entry和output，其他还是需要新建webpack.config.js文件的。
1、首先新建一个文件夹，初始化一个项目，生成package.json文件
npm init -y
2、安装webpack-cli，这里我建议以下的安装都进行本地安装，不要全局安装，避免与其他项目造成冲突
npm install webpack-cli --save-dev
3、安装webpack
npm install webpack --save-dev
创建完成后目录结构是这样的
上面说过了，webpack4已经默认了entry和output，entry默认的是根目录下src的index.js，所以新建一个src/index.js，简单的写点东西，如下：
然后在package.json中添加两条命令，在之前的版本中，通常需要定义两个配置文件，dev和prod一个开发一个生产，那么在最新的版本中我们只需要这样：
分别运行 npm run dev 和 npm run build，我们会发现多出来一个dist文件夹相对应的输出main.js文件，开发环境并没有压缩，而生产环境进行了压缩等操作
4、接着往下，到目前为止我们还没有一个前端页面，同样在 src 文件夹下新建index.html文件，初始化内容不用做任何操作；然后安装对html打包的插件 HtmlWebpackPlugin
npm install--save-dev html-webpack-plugin
新建 webpack.config.js文件并进行如下配置：
在上面的index.js文件中执行一下那个函数，然后终端执行 npm run dev，文件已经被打包到了dist文件夹下，浏览器打开index.html我们会看到打印出来的test
5、安装简单的web服务器，并添加热加载 webpack-dev-server
npm install--save-dev webpack-dev-server
修改配置文件 webpack.config.js 和 package.json，配置完成后就可以运行 npm run dev在浏览器查看了，并且支持热加载
6、其他插件以及加载器
加载css
npm install--save-dev style-loader css-loader
加载图片
npm install--save-dev file-loader
build前删除dist文件夹
npm installclean-webpack-plugin --save-dev
最终结果是这样的
网友评论