webpack 4.39总结

踩过的坑

1. 版本问题，在不同的版本中，有些插件的用法已经改变，但是中文官反文档还为更新，所以在学习第三方教程文档的时候，一定一定要选择真正官方文档，不要看第三方官反文档。
2. 在webpack 有些依赖可能存在相互影响，所以在搭建一个新的项目结构一定要重新初始化构造一个。

webpack 项目注意点概念解析

mode: "production"  生产模式，代码经过压缩，代码作为最终产品发布
mode: "development"   开发模式，在这个模式下代码没有被压缩，导致代码体积庞大，可是该模式便于代码调试

静态项目需要用插件及配置

1. entry:{
   “index”:’./src/js/index.js’,
   },
   入口：可以指定要加载的js

2. output: {
   filename: ‘js/[name].bundel.js’,
   path: path.resolve(__dirname, ‘dist’),
   publicPath: ‘./’,
   },
   出口指定文件打包的路径

3. devtool: ‘source-map’,//可用于开发环境调试,找出源码的出错地方

4. OptimizeCSSAssetsPlugin 压缩css插件

5. CleanWebpackPlugin()//自动清除目录结构，把原先结构全部清除

6. HtmlWebpackPlugin //生成一个html 模板

7. // test: /.(png|jpg|gif)$/,
   // use: [{
   // loader: ‘file-loader’,
   // options: {
   // name: ‘[name].[ext]’,
   // publicPath: “./img”,
   // outputPath: “img”
   // }
   // }]
   图片目录转移

8. copy-webpack-plugin //转移目录结构到指定目录

构建服务
// devServer: {//配置一个服务自动刷新浏览器内容,应用于开发环境，不可用于生长产环境，其存在的意义在于便于开发
// contentBase: ‘./dist’,
// host: “localhost”,
// port: “8090”,
// open: true, // 开启浏览器
// hot: true // 开启热更新
// },
构建服务便于开发，不用一直刷新