webpack4的使用及其更新说明

先说明webpack4之后更新的 

1、webpack-cli必须要全局安装，否则不能使用webpack指令； 
2、webpack也必须要全局安装，否则也不能使用webpack指令。 
3、webpack4.x中webpack.config.js这样的配置文件不是必须的。 

4、默认入口文件是./src/index.js，默认输出文件./dist/main.js。

5.执行webpack命令时会有警告 这是显示没有配置webpack的mode选项，默认有production和development两种，我们输入webpack --mode development

配置步骤

1、创建工程目录； 
2、初始化工程目录：npm init。 
3、全局安装webpack-cli。 
4、全局安装webpack。 
5、webpack –mode development/production进行打包，可在package.json中配置dev和build的脚本，便只需运行npm run dev/build，作用相同。 
6、在webpack –mode development/production可串联设置其他参数。

1.安装

要安装最新版本或特定版本，请运行以下命令之一：

  npm install --save-dev webpack
  npm install --save-dev webpack@<version>

如果使用 webpack 4+ 版本，还需要安装 CLI。

  npm install --save-dev webpack-cli

基本使用

  mkdir webpack-demo && cd webpack-demo
  npm init -y
  npm install webpack webpack-cli --save-dev

---

2.使用配置文件

基本的配置文件如下：

  const path = require('path');
  module.exports = {
    entry: './src/index.js',
    output: {
      filename: 'bundle.js',
      path: path.resolve(__dirname, 'dist')
    }
  };  

3.在 package.json 添加一个 npm 脚本(npm script)

  "build": "webpack"

• 1

现在npm run build即可打包相关文件。

---

3.加载CSS

• 首先安装相应的loader

  npm install --save-dev style-loader css-loader

• 1

• 修改webpack.config.js文件

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  }
};

• 
  

• 在js文件中引用CSS

  import './style.css';

• 1

---

4.加载图片、字体等

• 安装file-loader

  npm install --save-dev file-loader

• 1

• 
  
• 加载图片 
  

修改webpack.config.js，在rules中添加以下部分

  {
      test: /\.(png|svg|jpg|gif)$/,
      use: ['file-loader']
  }

• 
  

file-loader具体配置参见：File-Loader配置简述 
将图片转成base64的loader：npm install url-loader --save-dev (url-loader包含file-loader)

压缩图片的loader：npm install image-webpack-loader --save-dev

• 
  
• 加载字体 
  

修改webpack.config.js，在rules添加以下部分

  {    
    test: /\.(woff|woff2|eot|ttf|otf)$/,
    use: ['file-loader' ]
  }

• 
  

在CSS中自定义字体

  @font-face {
   font-family: 'MyFont';
   src:  url('./my-font.woff2') format('woff2'),
         url('./my-font.woff') format('woff');
   font-weight: 600;
   font-style: normal;
 }

• 
  

---

5. HtmlWebpackPlugin

作用：由webpack output生成的js文件由于常含有hash值，因此文件名是动态变化的，此时如果手动改变HTML文件引用的js是很麻烦的，该插件利用manifest可自动生成含有引用的HTML文件。

  npm install --save-dev html-webpack-plugin

• 更改webpack.config.js配置：

  plugins: [
    new HtmlWebpackPlugin({
      title: 'Output Management',
      template: './dist/index.html'
    })
  ]

• 
  

详细配置参见html-webpack-plugin

---

6. clean-webpack-plugin

由于过去的指南和代码示例遗留下来，导致我们的 /dist 文件夹相当杂乱。webpack 会生成文件，然后将这些文件放置在 /dist 文件夹中，但是 webpack 无法追踪到哪些文件是实际在项目中用到的。通常，在每次构建前清理 /dist 文件夹，是比较推荐的做法，因此只会生成用到的文件。

  npm install clean-webpack-plugin --save-dev

• 1

使用extract-text-webpack-plugin插件同样是先安装 npm install --save-dev extract-text-webpack-plugin

const ExtractTextPlugin = require('extract-text-webpack-plugin');

需要改造一下代码要不无法分离出css

把css loader部分改为

{
    test:/\.css$/,
    use: ExtractTextPlugin.extract({
        fallback: "style-loader",
        use: "css-loader"
    })
}

然后添加在plugins里面

new ExtractTextPlugin("style.css")

8. source map

为了更容易地追踪错误和警告，JavaScript 提供了 source map 功能，将编译后的代码映射回原始源代码。如果一个错误来自于 b.js，source map 就会明确的告诉你。可以添加如下配置：

  devtool: 'inline-source-map',

• 关于更多source map选项，参见Webpack中的sourcemap以及如何在生产和开发环境中合理的设置sourcemap的类型和Webpack中的sourcemap

9.使用 webpack-dev-server

webpack-dev-server 为你提供了一个简单的 web 服务器，并且能够实时重新加载(live reloading)。

  npm install --save-dev webpack-dev-server

• 修改配置文件，告诉开发服务器(dev server)，在哪里查找文件：

  devServer: {
     contentBase: './dist'
  }

• 
  

以上配置告知 webpack-dev-server，在 localhost:8080 下建立服务，将 dist 目录下的文件，作为可访问文件。在package.json中添加一个 script 脚本，可以直接运行开发服务器(dev server)：

  "start": "webpack-dev-server --open"

• 10.模块热替换

模块热替换(Hot Module Replacement 或 HMR)是 webpack 提供的最有用的功能之一。它允许在运行时更新各种模块，而无需进行完全刷新。

  //在devServer配置中添加该项
  hot: true  

  // 在plugins选项中添加这两个内置插件
  new webpack.NamedModulesPlugin() ,
  new webpack.HotModuleReplacementPlugin()  

  // 在引用需要热替换的模块时添加以下代码
  if (module.hot) {
   module.hot.accept('./print.js', function() {
     console.log('Accepting the updated printMe module!');
     printMe();
   })
 }   

• 
  

关于热替换的更多内容，参见：Webpack模块热替换

11.Tree Shaking

Tree Shaking是指 移除 JavaScript 上下文中的未引用代码(dead-code)。它依赖于 ES2015 模块系统中的静态结构特性，例如 import 和 export.

// src/math.js
export function square(x) {
  return x * x;
}
export function cube(x) {
  return x * x * x;
}

// src/index.js
import { cube } from './math.js';
cube(2);

// 我们期望的结果是在打包的文件中删除square代码

• 
  

在一个纯粹的 ESM 模块世界中，识别出哪些文件有副作用很简单。然而，我们的项目无法达到这种纯度，所以，此时有必要向 webpack 的 compiler 提供提示哪些代码是“纯粹部分”。这种方式是通过 package.json 的 “sideEffects” 属性来实现的。

  // 在package.json中添加以下部分
  "sideEffects": false

  // 如果你的代码确实有一些副作用，那么可以改为提供一个数组：
  "sideEffects": [
    "./src/some-side-effectful-file.js"
  ]

• 
  

通过如上方式，我们已经可以通过 import 和 export 语法，找出那些需要删除的“未使用代码(dead code)”，然而，我们不只是要找出，还需要在 bundle 中删除它们。为此，我们将使用 -p(production) 这个 webpack 编译标记，来启用 uglifyjs 压缩插件。从 webpack 4 开始，也可以通过 “mode” 配置选项轻松切换到压缩输出，只需设置为 “production”。

  // 在webpack.config.js中配置如下属性
  mode: "production"

  // 或者更改package.json 文件中的sbuild值
  "build": "webpack -p",  // 或者
  "build": "webpack --optimize-minimize"

• 
  

此时在打包文件中，已经找不到square了，说明该部分的代码已经被shaking了。