Webpack（webpack-dev-server）

Posted 2020-10-17 Colorful_coco

Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载。通过 loader 的转换，任何形式的资源都可以视作模块，比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等。

1、安装webpack

npm安装插件是从国外服务器下载，受网络影响大；安装淘宝 NPM 镜像，从官方 NPMregistry.npmjs.org 进行安装

npm install -g cnpm --registry=https://registry.npm.taobao.org

cnpm/npm install --save-dev webpack

 

2、webpack打包命令

webpack --watch //监听变动并自动打包

webpack -p//压缩混淆脚本

 

3、webpack-dev-server（DevServer）

安装：npm install webpack-dev-server --save-dev

webpack-dev-server启用一个服务后，会监听你的文件，当内容改变时会自动重新打包，默认端口是8080。

webpack-dev-server是一个小型的Node.js Express服务器，webpack-dev-server生成的包并没有放在你的真实目录中,而是放在了内存中。

//webpack.config.js
module.exports = {
  entry: ‘./src/main.js‘,
  output: {
    path: path.resolve(__dirname, ‘./dist‘),
    publicPath: ‘/dist/‘,
    filename: ‘build.js‘
  }
}

webpack-dev-server 会默认以 publicPath 为基准，使用它来决定在哪个目录下启用服务，来访问 webpack 输出的文件。

//package.json
{
  ...
  "scripts": {
    "test1": "webpack-dev-server", //修改代码后会自动打包页面重载
    "test2": "webpack-dev-server --inline=false", //iframe模式
    "test3": "webpack-dev-server --hot", //修改代码后会自动打包，浏览器只替换更新的部分
    "test4": "webpack-dev-server --open" //自动在默认浏览器中打开url
  }
}

webpack-dev-server支持两种模式来自动刷新页面。

iframe模式：修改代码后会自动打包，但是浏览器不会自动刷新。

inline模式：修改代码后，webpack将自动打包并且刷新浏览器。（默认）

2）webpack-dev-server --hot：启用热模块替换（只替换更新的部分,而不是页面重载）