js-webpack

js-webpack

---

相关资料

• 入门 Webpack，看这篇就够了 - https://segmentfault.com/a/1190000006178770
• Webpack 4 教程：从零配置到生产发布（2018） - https://www.css88.com/archives/9436

---

配置局域网可访问

默认只能本机 localhost 访问, 默认端口 8080

• 配置 webpack.config.js

  devServer: {
     contentBase: distFolder,
     port:8081,
     host:'0.0.0.0', // 不限访问
     overlay:{
         errors:true, //编译过程中如果有任何错误，都会显示到页面上
     },
     open:true //自动帮你打开浏览器
   },

• 参考: Webpack 4.x更改端口 - https://blog.csdn.net/qq_38526769/article/details/82382586

---

踩坑

• 报错: Error: Cannot find module 'webpack' 或者 Error: Cannot find module 'webpack-cli'

  因为没有同时安装 webpack 和 webpack-cli 这两个模块

  使用命令: yarn add webpack-cli webpack -D

  • 没有安装 yarn 的先安装. 命令: npm i yarn -g

• 警告: Set 'mode' option to 'development' or 'production'

  在 webpack.config.js 中加入 mode: 'development',

  module.exports = {
  	...
      mode: 'development',
  }

• 报错: webpack.optimize.UglifyJsPlugin has been removed

  参考:

  • https://my.oschina.net/hyzccc/blog/1797358
  • https://stackoverflow.com/questions/49053215/webpack-4-how-to-configure-minimize