webpack4.0 入门篇 - 构建前端开发的基本环境

时间  2019-11-06
标签 webpack4.0 webpack 入门 构建 前端 开发 基本 环境 繁體版
原文   原文链接

什么是 webpack

webpack 能够看作是模块打包机：他作的事情是，分析你的项目结构，找到 JavaScript 模块以及其余的一些浏览器不能直接运行的扩展语言（Scss、TypeScript 等），将其打包为合适的格式以供浏览器使用css

构建就是把源代码转换成发布到线上可执行的 JavaScript、CSS、HTML 代码，包括如下内容：html

  • 代码转换：TypeScript 编译成 JavaScript、SCSS 编译成 CSS 等等
  • 文件优化：压缩 JavaScript、CSS、HTML 代码，压缩合并图片等
  • 代码分割：提取多个页面的公共代码、提取首屏不须要执行部分的代码让其异步加载
  • 模块合并：在采用模块化的项目有不少模块和文件，须要构建功能把模块分类合并成一个文件
  • 自动刷新：监听本地源代码的变化，自动构建，刷新浏览器
  • 代码校验：在代码被提交到仓库前须要检测代码是否符合规范，以及单元测试是否经过
  • 自动发布：更新完代码后，自动构建出线上发布代码并传输给发布系统。

构建实际上是工程化、自动化思想在前端开发中的体现。把一系列流程用代码去实现，让代码自动化地执行这一系列复杂的流程。前端

webpack 的基本概念

  • 入口(entry point): 指示 webpack 应该使用哪一个模块，来做为构建其内部依赖图的开始，webpack 会找出有哪些模块和 library 是入口起点（直接和间接）依赖的。vue

    • 默认值是 ./src/index.js，然而，能够经过在 webpack 配置中配置 entry 属性，来指定一个不一样的入口起点（或者也能够指定多个入口起点）。

  • 出口 output: 属性告诉 webpack 在哪里输出它所建立的 bundles，以及如何命名这些文件，主输出文件默认为 ./dist/main.js，其余生成文件的默认输出目录是 ./distnode

  • loader: 让 webpack 可以去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 能够将全部类型的文件转换为 webpack 可以处理的有效模块，而后你就能够利用 webpack 的打包能力，对它们进行处理。react

注意，loader 可以 import 导入任何类型的模块（例如 .css 文件），这是 webpack 特有的功能，其余打包程序或任务执行器的可能并不支持。咱们认为这种语言扩展是有很必要的，由于这可使开发人员建立出更准确的依赖关系图。webpack

  • 插件 plugins: loader 被用于转换某些类型的模块，而插件则能够用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到从新定义环境中的变量。插件接口功能极其强大，能够用来处理各类各样的任务。ios

  • 模式 mode: 经过选择 development 或 production 之中的一个，来设置 mode 参数，你能够启用相应模式下的 webpack 内置的优化git

webpack 构建过程

  1. 从 Entry 里配置的 Module 开始递归解析 Entry 依赖的全部 Module。
  2. 每找到一个 Module， 就会根据配置的 Loader 去找出对应的转换规则。
  3. 对 Module 进行转换后，再解析出当前 Module 依赖的 Module。
  4. 这些模块会以 Entry 为单位进行分组，一个 Entry 和其全部依赖的 Module 被分到一个组也就是一个 Chunk。
  5. 最后 Webpack 会把全部 Chunk 转换成文件输出。
  6. 在整个流程中 Webpack 会在恰当的时机执行 Plugin 里定义的逻辑。

开发环境和生产环境

咱们在平常的前端开发工做中，通常都会有两套构建环境：一套开发时使用，一套供线上使用。es6

  • development: 用于开发的配置文件，用于定义 webpack dev server 和其余东西
  • production: 用于生产的配置文件，用于定义 UglifyJSPlugin，sourcemaps 等

简单来讲，开发时可能须要打印 debug 信息，包含 sourcemap 文件，而生产环境是用于线上的即代码都是压缩后，运行时不打印 debug 信息等。譬如 axios、antd 等咱们的生产环境中须要使用到那么咱们应该安装该依赖在生产环境中，而 webpack-dev-server 则是须要安装在开发环境中

平时咱们 npm 中安装的文件中有 -S -D, -D 表示咱们的依赖是安装在开发环境的，而-S 的是安装依赖在生产环境中。

本文就来带你搭建基本的前端开发环境，前端开发环境须要什么呢？

  • 构建发布须要的 HTML、CSS、JS、图片等资源
  • 使用 CSS 预处理器，这里使用 less
  • 配置 babel 转码器 => 使用 es6+
  • 处理和压缩图片
  • 配置热加载，HMR

以上配置就能够知足前端开发中须要的基本配置。下面是本文打包后的效果图：

搭建基本的开发环境

安装

mkdir webpack-dev && cd webpack-dev
npm init -y
npm i webpack webpack-cli -D
复制代码

添加 scripts

生成了 package.json 文件，在文件中添加

"scripts": {
    "build": "webpack --mode production"
  }
复制代码

--mode 模式 (必选，否则会有 WARNING)，是 webpack4 新增的参数选项，默认是 production

  • --mode production 生产环境
    • 提供 uglifyjs-webpack-plugin 代码压缩
    • 不须要定义 new webpack.DefinePlugin({ "process.env.NODE_ENV": JSON.stringify("production") }) 默认 production
    • 默认开启 NoEmitOnErrorsPlugin -> optimization.noEmitOnErrors, 编译出错时跳过输出，以确保输出资源不包含错误
    • 默认开启 ModuleConcatenationPlugin -> optimization.concatenateModules, webpack3 添加的做用域提高(Scope Hoisting)
  • --mode development 开发环境
    • 使用 eval 构建 module, 提高增量构建速度
    • 不须要定义 new webpack.DefinePlugin({ "process.env.NODE_ENV": JSON.stringify("development") }) 默认 development
    • 默认开启 NamedModulesPlugin -> optimization.namedModules 使用模块热替换(HMR)时会显示模块的相对路径

添加了 scripts 以后，新建src/index.js，而后执行npm run build ，你就会发现新增了一个 dist 目录，里边存放的是 webpack 构建好的 main.js 文件。

ps npm scripts 使用指南

新建 webpack.config.js 文件

要想对 webpack 中增长更多的配置信息，咱们须要创建一个 webpack 的配置文件。在根目录下建立 webpack.config.js 后再执行 webpack 命令，webpack 就会使用这个配置文件的配置了

配置中具有如下的基本信息：

module.exports = {
  entry: '', // 打包入口：指示 webpack 应该使用哪一个模块，来做为构建其内部依赖图的开始
  output: '', // 出口
  resolve: {}, // 配置解析：配置别名、extensions 自动解析肯定的扩展等等
  devServer: {}, // 开发服务器：run dev/start 的配置，如端口、proxy等
  module: {}, // 模块配置：配置loader（处理非 JavaScript 文件，好比 less、sass、jsx、图片等等）等
  plugins: [] // 插件的配置：打包优化、资源管理和注入环境变量
}
复制代码

配置打包入口和出口

首先咱们往 webpack.config.js 添加点配置信息

const path = require('path')

module.exports = {
  // 指定打包入口
  entry: './src/index.js',

  // 打包出口
  output: {
    path: path.resolve(__dirname, 'dist'), // 解析路径为 ./dist
    filename: 'bundle.js'
  }
}
复制代码

上面咱们定义了打包入口 ./src/index.js，打包出口为 ./dist, 打包的文件夹名字为bundle.js，执行npm run build命令后，index.js 文件会被打包为 bundle.js 文件。此时随便创建一个 html 文件引用这个bundle.js就能够看到你在index.js 写的代码了。

path.resolve([...paths]) 方法会把一个路径或路径片断的序列解析为一个绝对路径。

使用 html-webpack-plugin 建立 html 文件

更多状况下咱们不但愿打包一次，就新建一次 html 文件来引用打包后的文件，这样显得不智能或者说当你打包的文件名修改后，引用路径就会出错。

这个时候咱们就可使用 html-webpack-plugin 插件来将 HTML 引用路径和咱们的构建结果关联起来。

npm install html-webpack-plugin -D
复制代码

建立文件public/index.html 修改 webpack.config.js 文件

const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
  //...
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html', // 配置输出文件名和路径
      template: './public/index.html' // 配置要被编译的html文件
    })
  ]
}
复制代码

从新执行 npm run build, dist 目录就会多个 index.html 并引入了 bundle.js.

压缩 html 文件

修改 webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
  //...
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html', // 配置输出文件名和路径
      template: './public/index.html', // 配置要被编译的html文件
      hash: true,
      // 压缩 => production 模式使用
      minify: {
        removeAttributeQuotes: true, //删除双引号
        collapseWhitespace: true //折叠 html 为一行
      }
    })
  ]
}
复制代码

打包 css 文件

咱们但愿使用 webpack 来进行构建 css 文件，，为此，须要在配置中引入 loader 来解析和处理 CSS 文件：

npm install style-loader css-loader -D
复制代码

新建 src/assets/style/color.css, 修改 webpack.config.js 文件：

module.exports = {
  //...
  module: {
    /** * test: 匹配特定条件。通常是提供一个正则表达式或正则表达式的数组 * include: 匹配特定条件。通常是提供一个字符串或者字符串数组 * exclude: 排除特定条件 * and: 必须匹配数组中的全部条件 * or: 匹配数组中任何一个条件, * nor: 必须排除这个条件 */
    rules: [
      {
        test: /\.css$/,
        include: [path.resolve(__dirname, 'src')],
        use: ['style-loader', 'css-loader']
      }
    ]
  }
  //...
}
复制代码

经由上述两个 loader 的处理后，CSS 代码会转变为 JS， 若是须要单独把 CSS 文件分离出来，咱们须要使用 mini-css-extract-plugin 插件

抽取 css 到独立文件, 自动添加前缀

npm i mini-css-extract-plugin postcss-loader autoprefixer -D
复制代码

咱们在写 css 时难免要考虑到浏览器兼容问题，如 transform 属性，须要添加浏览器前缀以适配其余浏览器。故使用到 postcss-loader 这个 loader， 下面则是相关的配置

webpack.config.js

const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.css$/,
        include: [path.resolve(__dirname, 'src')],
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              plugins: [require('autoprefixer')]
            }
          }
        ]
      }
    ]
  },
  plugins: [
    //...
    new MiniCssExtractPlugin({
      filename: '[name].css',
      chunkFilename: '[id].css'
    })
  ]
}
复制代码

打包 less 文件

开发中一般会用到一门预处理语言，这里以less为例，经过less-loader能够打包 less 为 css 文件

npm install less less-loader -D
复制代码

新建 src/assets/style/index.less, 而且在 src/index.js 中引入 import './assets/style/index.less'

配置 webpack.config.js

const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = {
  module: {
    rules: [
      // ...
      {
        test: /\.less$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              plugins: [require('autoprefixer')] // 添加css中的浏览器前缀
            }
          },
          'less-loader'
        ]
      }
    ]
  }
  //...
}
复制代码

执打包命令后就能够发现 index.less 中写的样式会和color.css同样被打包进 main.css中。

webpack@v4 升级踩坑: 关于使用 mini-css-extract-plugin 的注意点。

打包图片

npm install file-loader url-loader -D
复制代码

file-loader: 能够用于处理不少类型的文件，它的主要做用是直接输出文件，把构建后的文件路径返回。

url-loader: 若是图片较多，会发不少 http 请求，会下降页面性能。url-loader 会将引入的图片编码，生成 dataURl。至关于把图片数据翻译成一串字符。再把这串字符打包到文件中，最终只须要引入这个文件就能访问图片了。固然，若是图片较大，编码会消耗性能。所以 url-loader 提供了一个 limit 参数，小于 limit 字节的文件会被转为 DataURl，大于 limit 的还会使用 file-loader 进行 copy。

  • url-loader 能够看做是加强版的 file-loader。
  • url-loader 把图片编码成 base64 格式写进页面，从而减小服务器请求。
module.exports = {
  module: {
    rules: [
      // ...
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              outputPath: 'images/', //输出到images文件夹
              limit: 500 //是把小于500B的文件打成Base64的格式，写入JS
            }
          }
        ]
      }
    ]
  }
  //...
}
复制代码

url-loader 和 file-loader 是什么关系呢？

简单地说，url-loader 封装了 file-loader。url-loader 不依赖于 file-loader，即便用 url-loader 时，只须要安装 url-loader 便可，不须要安装 file-loader，由于 url-loader 内置了 file-loader。

经过上面的介绍，咱们能够看到，url-loader 工做分两种状况：

  • 文件大小小于 limit 参数，url-loader 将会把文件转为 DataURL；
  • 文件大小大于 limit，url-loader 会调用 file-loader 进行处理，参数也会直接传给 file-loader。所以咱们只须要安装 url-loader 便可。

有关 url-loader 和 file-loader 的解析：webpack 之图片引入-加强的 file-loader：url-loader

配置 babel

babel-loader

Babel 是一个让咱们可以使用 ES 新特性的 JS 编译工具，咱们能够在 webpack 中配置 Babel，以便使用 ES六、ES7 标准来编写 JS 代码。

Babel 7 的相关依赖包须要加上 @babel scope。一个主要变化是 presets 设置由原来的 env 换成了 @babel/preset-env, 能够配置 targets, useBuiltIns 等选项用于编译出兼容目标环境的代码。其中 useBuiltIns 若是设为 "usage"，Babel 会根据实际代码中使用的 ES6/ES7 代码，以及与你指定的 targets，按需引入对应的 polyfill，而无需在代码中直接引入 import '@babel/polyfill'，避免输出的包过大，同时又能够放心使用各类新语法特性。

npm i babel-loader @babel/core @babel/preset-env -D
复制代码

笔者这里配的版本号以下

{
  "babel-loader": "^8.0.4",
  "@babel/core": "^7.1.2",
  "@babel/preset-env": "^7.1.0"
}
复制代码
  • babel-loader: 用 babel 转换 ES6 代码须要使用到 babel-loader
  • @babel-preset-env： 默认状况下是等于 ES2015 + ES2016 + ES2017，也就是说它对这三个版本的 ES 语法进行转化。
  • @babel/core：babel 核心库

根目录下新建 .babelrc 文件

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "modules": false,
        "targets": {
          "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
        },
        "useBuiltIns": "usage"
      }
    ]
  ]
}
复制代码
  • presets 是一堆 plugins 的预设，起到方便的做用。
  • plugins 是编码转化工具，babel 会根据你配置的插件对代码进行相应的转化。

修改 webpack.config.js

module.exports = {
  module: {
    rules: [
      //...
      {
        test: /\.m?js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader'
        }
      }
    ]
  }
}
复制代码

babel/polyfill 和 transform-runtime

Babel 默认只转换新的 JavaScript 句法（syntax），而不转换新的 API ，好比 Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise 等全局对象，以及一些定义在全局对象上的方法（好比 Object.assign）都不会转码。

  • babel-polyfill: 如上述所说，对于新的 API，你可能须要引入 babel-polyfill 来进行兼容

  • 关键点

    • babel-polyfill 是为了模拟一个完整的 ES2015+环境，旨在用于应用程序而不是库/工具。
    • babel-polyfill 会污染全局做用域

babel-runtime 的做用：

  • 提取辅助函数。ES6 转码时，babel 会须要一些辅助函数，例如 _extend。babel 默认会将这些辅助函数内联到每个 js 文件里， babel 提供了 transform-runtime 来将这些辅助函数“搬”到一个单独的模块 babel-runtime 中，这样作能减少项目文件的大小。
  • 提供 polyfill：不会污染全局做用域，可是不支持实例方法如 Array.includes

babel-runtime 更像是分散的 polyfill 模块，须要在各自的模块里单独引入，借助 transform-runtime 插件来自动化处理这一切，也就是说你不要在文件开头 import 相关的 polyfill，你只需使用，transform-runtime 会帮你引入。

对于开发应用来讲，直接使用上述的按需 polyfill 方案是比较方便的，但若是是开发工具、库的话，这种方案未必适合（babel-polyfill 是经过向全局对象和内置对象的 prototype 上添加方法实现的，会形成全局变量污染）。Babel 提供了另一种方案 transform-runtime，它在编译过程当中只是将须要 polyfill 的代码引入了一个指向 core-js 中对应模块的连接(alias)。关于这两个方案的具体差别和选择，能够自行搜索相关教程，这里再也不展开，下面提供一个 transform-runtime 的参考配置方案。

  • 首先安装 runtime 相关依赖
npm i @babel/plugin-transform-runtime -D
npm i @babel/runtime -S
复制代码

修改 .babelrc

{
  //...
  "plugins": ["@babel/plugin-transform-runtime"]
}
复制代码

打包前清理源目录文件 clean-webpack-plugin

每次打包，都会生成项目的静态资源，随着某些文件的增删，咱们的 dist 目录下可能产生一些再也不使用的静态资源，webpack 并不会自动判断哪些是须要的资源，为了避免让这些旧文件也部署到生产环境上占用空间，因此在 webpack 打包前最好能清理 dist 目录。

npm install clean-webpack-plugin -D
复制代码

修改 webpack.config.js 文件

const CleanWebpackPlugin = require('clean-webpack-plugin')
module.exports = {
  plugins: [new CleanWebpackPlugin(['dist'])]
}
复制代码

提取公用代码

假如你 a.js 和 b.js 都 import 了 c.js 文件，这段代码就冗杂了。为何要提取公共代码，简单来讲，就是减小代码冗余，提升加载速度。

module.exports = {
  //...
  optimization: {
    splitChunks: {
      cacheGroups: {
        commons: {
          // 抽离本身写的公共代码
          chunks: 'initial',
          name: 'common', // 打包后的文件名，任意命名
          minChunks: 2, //最小引用2次
          minSize: 0 // 只要超出0字节就生成一个新包
        },
        styles: {
          name: 'styles', // 抽离公用样式
          test: /\.css$/,
          chunks: 'all',
          minChunks: 2,
          enforce: true
        },
        vendor: {
          // 抽离第三方插件
          test: /node_modules/, // 指定是node_modules下的第三方包
          chunks: 'initial',
          name: 'vendor', // 打包后的文件名，任意命名
          // 设置优先级，防止和自定义的公共代码提取时被覆盖，不进行打包
          priority: 10
        }
      }
    }
  }
}
复制代码

hash

hash 是干吗用的？ 咱们每次打包出来的结果可能都是同一个文件，那我上线的时候是否是要替换掉上线的 js，那我怎么知道哪是最新的呢，咱们通常会清一下缓存。而 hash 就是为了解决这个问题而存在的

咱们此时在改一些 webpack.config.js 的配置

module.exports = {
  //...
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[hash:8].js'
  },
  //...
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].[hash:8].css',
      chunkFilename: '[id].[hash:8].css'
    })
  ]
}
复制代码

减小 resolve 的解析，配置别名

若是咱们能够精简 resolve 配置，让 webpack 在查询模块路径时尽量快速地定位到须要的模块，不作额外的查询工做，那么 webpack 的构建速度也会快一些

module.exports = {
  resolve: {
    /** * alias: 别名的配置 * * extensions: 自动解析肯定的扩展, * 好比 import 'xxx/theme.css' 能够在extensions 中添加 '.css'， 引入方式则为 import 'xxx/theme' * @default ['.wasm', '.mjs', '.js', '.json'] * * modules 告诉 webpack 解析模块时应该搜索的目录 * 若是你想要添加一个目录到模块搜索目录，此目录优先于 node_modules/ 搜索 * 这样配置在某种程度上能够简化模块的查找，提高构建速度 @default node_modules 优先 */
    alias: {
      '@': path.resolve(__dirname, 'src'),
      tool$: path.resolve(__dirname, 'src/utils/tool.js') // 给定对象的键后的末尾添加 $，以表示精准匹配
    },
    extensions: ['.wasm', '.mjs', '.js', '.json', '.jsx'],
    modules: [path.resolve(__dirname, 'src'), 'node_modules']
  }
}
复制代码

webpack-dev-serve

上面讲到了都是如何打包文件，可是开发中咱们须要一个本地服务，这时咱们可使用 webpack-dev-server 在本地开启一个简单的静态服务来进行开发。

webpack-dev-server 是 webpack 官方提供的一个工具，能够基于当前的 webpack 构建配置快速启动一个静态服务。当 mode 为 development 时，会具有 hot reload 的功能，即当源码文件变化时，会即时更新当前页面，以便你看到最新的效果。...

npm install webpack-dev-server -D
复制代码

package.json 中 scripts 中添加

"start": "webpack-dev-server --mode development"
复制代码

默认开启一个本地服务的窗口 http://localhost:8080/ 便于开发

配置开发服务器

咱们能够对 webpack-dev-server 作针对性的配置

module.exports = {
  // 配置开发服务器
  devServer: {
    port: 1234,
    open: true, // 自动打开浏览器
    compress: true // 服务器压缩
    //... proxy、hot
  }
}
复制代码
  • contentBase: 服务器访问的根目录（可用于访问静态资源）
  • port: 端口
  • open: 自动打开浏览器

模块热替换(hot module replacement)

模块热替换(HMR - Hot Module Replacement)功能会在应用程序运行过程当中替换、添加或删除模块，而无需从新加载整个页面。主要是经过如下几种方式，来显著加快开发速度：

  • 保留在彻底从新加载页面时丢失的应用程序状态。
  • 只更新变动内容，以节省宝贵的开发时间。
  • 调整样式更加快速 - 几乎至关于在浏览器调试器中更改样式。

上面咱们 npm start 后修改一次文件，页面就会刷新一次。这样就存在很大问题了，好比咱们使用 redux, vuex 等插件，页面一刷新那么存放在 redux, vuex 中的东西就会丢失，很是不利于咱们的开发。

HMR 配合 webpack-dev-server ，首先咱们配置下 webpack.config.js

const webpack = require('webpack')

module.exports = {
  devServer: {
    //...
    hot: true
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin()
    //...
  ]
}
复制代码

配置后还不行，由于 webpack 还不知道你要更新哪里, 修改 src/index.js 文件, 添加

if (module.hot) {
  module.hot.accept()
}
复制代码

重启服务，npm start 以后，修改引入 index.js 文件后，页面就不会从新刷新了，这便实现了 HMR

可是可是有个问题是，你修改 css/less 等样式文件并未发生改变， what ?

HMR 修改样式表 须要借助于 style-loader， 而咱们以前用的是 MiniCssExtractPlugin.loader， 这也好办，修改其中一个 rules 就能够了，咱们能够试试改

module.exports = {
  module: {
    rules: [
      {
        test: /\.less$/,
        use: [
          // MiniCssExtractPlugin.loader,
          'style-loader',
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              plugins: [require('autoprefixer')] // 添加css中的浏览器前缀
            }
          },
          'less-loader'
        ]
      }
    ]
  }
}
复制代码

这样咱们修改 less 文件就会发现 HMR 已经实现了。

其实，咱们能够发现，dev 下配置的 loader 为 style-loader , 而生产环境下则是须要 MiniCssExtractPlugin.loader

这就涉及到了不一样环境之间的配置。能够经过 process.env.NODE_ENV 获取当前是开发环境或者是生产环境，而后配置不一样的 loader，这里就不作展开了。下一篇文章打算在作一个 react-cli 或者 vue-cli 的配置，将开发环境的配置与生产环境的配置分开为不一样的文件。

结语

前面讲到的知识都是 webpack 的一些基础的知识，更多的资料能够查询webpack 中文官网，官网讲的比较详细，我这里也是讲最常的配置，也是一篇入门系列的文章，文中涉及的知识点还有不少地方还须要完善，譬如 优化 webpack 的构建速度， 减少打包的体积等等。

学习 webpack 4.0 还须要多实践，多瞎搞，笔者也是刚刚学习 webpack 的配置，不对之处请各位指出。

下一篇文章打算从零配置一个脚手架，以加深本身对 webpack 的理解。

本文产生的代码：webpack-dev

参考

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程