zixinfeng

2018-08-06 10:10

webpack4 使用指南

本文作者:IMWeb zixinfeng 原文出处:IMWeb社区 未经同意,禁止转载

webpack4 基础

  1. npm init --yes
  2. yarn add webpack webpack-dev-server webpack-cli
  3. mkdir src && touch index.mjs
  4. package.json scripts: {"webpack": "webpack --mode=production"}
  5. npm run webpack
  6. 查看dist目录下面自动会存在main.js文件

webpack-dev-server

  1. webpack-dev-server --help查看参数

    • --output-public-path
    • -p 指定输出的mode=production
    • -d 指定输入的mode=development
    • -w 就是制定--watch
    • --hot表示热加载
    • --open自动打开浏览器
  2. scripts: {"dev": "webpack-dev-server -d -w --hot --output-public-path=dist/"}

    • 不加上--output-public-path 默认是导出在根目录下和src同级目录下的main.js 需要引入 <script src="./main.js"></script\> 才能热加载
    • 加上--output-public-path 引入 [removed][removed] 才能热加载
  3. --config-register 简写 -r 引入typescript模块

    • -r ts-node/register 这里ts-node/register是全局安装的
  4. 只打包我们需要的

    • import {curry} from 'ramda/es' => import curry from 'ramda/es/curry' 大小会很明显的小起来
  5. 对打包进行分析

    • webpack -d --json > state.json

webpack path publicPath contentBase 的理解

  1. path:指定编译目录而已(/build/js/),不能用于html中的js引用。
  2. publicPath:虚拟目录,自动指向path编译目录(/assets/ => /build/js/)。html中引用js文件时,必须引用此虚拟路径(但实际上引用的是内存中的文件,既不是/build/js/也不是/assets/)。
  3. content-base:必须指向应用根目录(即index.html所在目录),与上面两个配置项毫无关联。
  4. 发布至生产环境:
    1.webpack进行编译(当然是编译到/build/js/)
    2.把编译目录(/build/js/)下的文件,全部复制到/assets/目录下(注意:不是去修改index.html中引用bundle.js的路径)

webpack.config.js 解释

const path = require('path');
// 将脚本自动注入到指定html文件的插件 yarn add html-webpack-plugin --dev
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  // webpack 文件打包的入口 可以是 Array, Object, String 这里是单文件入口
  entry: './src/index.js',
  output: {
    // 打包后文件的名称  可以在里面使用 [name].bundle.js  (chunkname, chunkhash, name, filename等)
    filename: 'index.bundle.js',
    // 打包后文件存储的位置
    path: path.resolve(__dirname, './dist'),
    // 将文件打包到了dist目录下面, 在已有路径的基础上添加上 assets/index.bundle.js
    // publicPath: '/assets/'
  },
  // 配置规则
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
      },
    ],
  },
  devServer: {
    // 公共路径 打包后资源可以访问的路径  public:'/mypath/'  ==>  http://localhost:8080/mypath/index.bundle.js
    publicPath: '/',
    // webpack-dev-server会使用当前的路径作为请求的资源路径,但是你可以通过指定content base来修改这个默认行为:
    // 本地服务器在哪个目录搭建页面,一般我们在当前目录即可
    // contentBase: './mypage/'   那么就会打开 localhost:port 的时候 默认打开的是  ./mypage/index.html
    contentBase: './',
    host: 'localhost',
    // 是否对打包的内容进行压缩
    compress: false,
    // 打开的端口
    port: 8080,
    // 当我们搭建spa应用时非常有用,它使用的是HTML5 History Api,任意的跳转或404响应可以指向 index.html 页面;
    historyApiFallback: true,
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html', // 模板文件
      filename: 'index.html', // 注入脚本后文件的名称
      inject: 'body', // 将脚本注入到body的底部 (head, true, body, false)
    }),
  ],
};

升级

  1. 零配置
    1. 零配置就意味着webpack4具有默认配置,webpack运行时,会根据mode的值采取不同的默认配置。如果你没有给webpack传入mode,会抛出错误,并提示我们如果要使用webpack就需要设置一个mode。
    2. mode development none production
    3. webpack4把很多插件相关的配置都迁移到了optimization中,但是我们看看官方文档对optimization的介绍简直寥寥无几,而在默认配置的代码中,webpack对optimization的配置有十几项,反正我是怕了
    4. 这里还有一些其他的配置没有贴出来, 可以去
  1. loaders和plugins升级
    1. 先说说extract-text-webpack-plugin,这个插件主要用于将多个css合并成一个css,减少http请求,命名时支持contenthash(根据文本内容生成hash)。但是webpack4使用有些问题,所以官方推荐使用mini-css-extract-plugin。
0条评论

    您需要 注册 一个IMWeb账号或者 才能进行评论。