Webpack4安装教程-使用教程

最新推荐文章于 2024-09-15 21:55:26 发布

blueBings

最新推荐文章于 2024-09-15 21:55:26 发布

阅读量789

点赞数

分类专栏： webpack 文章标签： webpack4 webpack4安装

webpack 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

  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"

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

3.加载CSS

首先安装相应的loader

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

修改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';

4.加载图片、字体等

安装file-loader

  npm install --save-dev file-loader

加载图片

修改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

7. source map

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

  devtool: 'inline-source-map',

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

8.使用 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"

9.模块热替换

模块热替换(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模块热替换

10.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"