李伟盛/fed-e-task-02-02

1、Webpack 的构建流程主要有哪些环节？如果可以请尽可能详尽的描述 Webpack 打包的整个过程。

entry: 文件打包的入口

如果是多个入口则，entry是对象；而当entry是数组时，是将多个文件打包到一个入口中

// 单个入口
module.exports = {
  entry: [
    'index.js',
    'app.js',
  ]
}

// 多个入口
module.exports = {
  entry: {
    index: 'index.js',
    app: 'app.js'
  }
}

output: 文件的输出

定位js文件输出的位置和名称，以及静态资源的位置，publicpath 设置静态资源CDN地址

module.exports = {
  output: {
    filename: 'bundle.js',
    path: path.join(__dirname, 'dist'),
    publicpath: './dist'
  }
}

mode 模式： webpack 4，新增的属性，包含了三个默认值 development(开发莫斯) production(生产模式) none

development 自动优化打包的速度，添加一些调试过程的辅助 production 自动优化打包的结果，比如对js文件自动压缩 none webpack 最原始的打包，不做任何优化

module 模块：添加loader，针对除了js之外的资源，比如图片，样式等等

module.exports = {
  module: {
    rules: [
      {
        test: /.css$/,
        use: 'css-loader'
      }
    ]
  }
}

plugins 插件：处理资源优化，和环境变量注入，bundle优化，比如将css提取到css文件中来

module.exports = {
  plugins: [
    new MiniCssExtractPlugin(
      {
        filename: 'css/[name].[contenthash:8].css',
        chunkFileName: 'css/[name].[contenthash:8].css'
      }
    )
  ]
}

李伟盛 / fed-e-task-02-02

1、Webpack 的构建流程主要有哪些环节？如果可以请尽可能详尽的描述 Webpack 打包的整个过程。

2、Loader 和 Plugin 有哪些不同？请描述一下开发 Loader 和 Plugin 的思路。

简介

发行版

贡献者

近期动态

李伟盛 / fed-e-task-02-02 .gitee-modal { width: 500px !important; }

1、Webpack 的构建流程主要有哪些环节？如果可以请尽可能详尽的描述 Webpack 打包的整个过程。

2、Loader 和 Plugin 有哪些不同？请描述一下开发 Loader 和 Plugin 的思路。

简介

发行版

贡献者

近期动态

搜索帮助

李伟盛 / fed-e-task-02-02