Webpack快速上手

什么是 Webpack ?

webpack 是一个静态模块打包工具,处理模块依赖生成浏览器可执行的代码。

快速开始

1.建立工程文件夹,初始化

npm init -y

  1. 本地安装 webpack

    npm install webpack webpack-cli -D
  2. 调整 package.json
    移除 main 入口防止意外发布代码,添加 private 确保安装包是私有的。

    // package.json
    {
    "name": "webpack-demo",
    "version": "1.0.0",
    "description": "",
    + "private": true,
    - "main": "index.js",
    "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
    "webpack": "^4.30.0",
    "webpack-cli": "^3.3.2"
    }
    }
  3. 在工程目录建立以下文件

    • /src
      • index.js
      • index.css
    • /dist
      • index.html
  4. 安装对应 loader 处理 css

    npm install css-loader style-loader -D
  5. 配置 webpack.config.js

    const path = require('path')

    module.exports = {
    mode: 'development', // 模式 | production(默认) | none
    entry: { // 入口
    index: path.resolve(__dirname, 'src/index.js')
    },
    output: { // 出口
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
    },
    module: {
    rules: [
    {
    test: /\.css$/,
    use: ['style-loader', 'css-loader'] // 注意顺序,从后往前
    }
    ]
    }
    }
  6. index.js 中引入 index.css

    import './index.css'

    ···
  7. index.html 中引入打包生成的 bundle.js

    <html>
    <head>
    <title>webpack-demo</title>
    <meta charset="utf-8">
    </head>
    <body>
    <script src="./bundle.js"></script>
    <body>
    </html>
  8. 在工程目录使用命令打包

    webpack

可打开 /dist/index.html 查看结果

Webpack 核心概念

Mode

模式可以通过配置 mode 进行配置,用于告知 webpack 使用相应环境的内置优化。

可选值:

  • development 开发环境
  • production 生产环境
  • none

Entry

入口指示 webpack 应从哪个模块开始着手,来作为构建其内部依赖图的开始。

配置方法:entry: string|Array<string>

module.exports = {
mode: 'development',
entry: path.resolve(__dirname, 'src/index.js')
}

对象语法配置:

module.exports = {
mode: 'development',
entry: {
index: path.resolve(__dirname, 'src/index.js')
}
}

Output

我们定义的「入口」是 webpack 打包时的程序入口,而最终编译构建后,真正被浏览器加载的资源文件则是「出口」文件,出口配置 webpack 在哪里输出它所创建的 bundles,和指定 bundles 的名字,默认位置是 ./dist

配置方法:

const path = require('path')

module.exports = {
mode: 'development',
entry: path.resolve(__dirname, 'src/index.js'),
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundule.js'
}
}

如果配置了多入口,则输出多个 bundle:

const path = require('path')

module.exports = {
mode: 'development',
entry: {
app: path.resolve(__dirname, 'src/app.js'),
vendor: path.resolve(__dirname, 'src/vendor.js')
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].js'
}
}

以上配置会将 app.jsvendor.js 输出到 ./dist/ 目录下,

Loader

loader 用于对模块的源代码进行转换。webpack 本身只认识 js 和 json 文件,如果要处理其他类型的文件就需要使用对应的 loader。

loader 配置在 module 属性的 rules 数组中,因为 webpack 把所有文件都看成一个个模块,而 loader 正是用于对模块的源代码进行转换。

配置 loader 两个目标:

  • test: 一个正则表达式,标志带哪些后缀的文件需要被处理。
  • use: 指定 loader 处理满足 test 条件的文件

可选参数:

  • include/exclude: 正则,手动指定必须处理的文件夹或屏蔽不需要处理的文件夹
const path = require('path')

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

该配置指定了所有入口依赖的 css 文件,都会先经过 css-loader 处理,再通过 style-loader 转换成 html 上 <style> 标签。

Plugins

loader 用于转换非 JavaScript 类型的文件,而插件则是用于执行范围更广的任务,包括打包优化、压缩、重新定义环境中的变量等等。使用插件,先 npm 安装,再在配置文件中引入,最后将其实例传递给 plugins 数组属性。

const webpack = require('webpack')

module.exports = {
// other code
plugins: [
new webpack.optimize.UglifyJsPlugin()
]
}

搭建开发环境

开发环境讲究调试、测试,希望文件是未压缩与未混淆的。

使用 source map 进行调试

使用 webpack 对源代码进行打包后,会对源代码进行压缩、精简、甚至变量名替换,在浏览器中无法对代码进行调试,而使用 sourse map 后,我们可以在浏览器看到源代码,进而可以进行调试。

使用 source map:
在配置中添加 devtool 属性,赋值为 source-map 或者 inline-source-map 即可,后者报错信息更加具体,会指示代码的具体错误位置,而 source-map 不会。

module.exports = {
// other code
devtool: 'source-map'
}

使用 webpack-dev-server

每次写完代码,还要切到控制台,运行打包命令是件很浪费时间的事情。所以需要使用到 webpack-dev-server

使用方法:

  • ① 安装 webpack-dev-server

    npm install webpack-dev-server -D
  • ② 修改 webpack.config.js 配置,添加 devServer 属性:

    module.exports = {
    // other code
    module.exports = {
    devServer: {
    contentBase: './dist' // 静态服务的内容目录地址
    // 访问 http://localhost:8080 会映射成工程目录下的 dist 文件夹(webpack-dev-server 访问的是内存中的文件,此时文件并未真正输出到 dist 目录下)
    }
    }
    }
  • ③ 在 package.jsonscripts 属性中添加命令:

    {
    // other code
    "scripts": {
    "dev": "webpack-dev-server --open"
    }
    }
  • ④ 运行命令

    npm run dev

    可以看到当修改文件后,浏览器自动刷新。

此外,webpack-dev-server 还有其他功能,比如开发服务器的端口、热更新模式等等,可以参考 Webpack

搭建生产环境

尽量减少构建包的体积。

配置 optimization

在 webpack@4 之前,想做构建优化,需引入不少插件。webpack@4 内置了常用的插件,并将其配置化,主要收敛在 optimization 这个配置项中。其主要配置有:

minimize

mode 配置为 production 时,minimize 默认为 true。若将其设为 false ,则取消引入 uglifyjs-webpack-plugin

minimizer

配置执行代码压缩的工具,默认为 uglifyjs-webpack-plugin,如需要替换成其他的或新增代码压缩插件,可以手动覆盖:

const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
module.exports = {
// other code
optimization: {
minimizer: [
new UglifyJsPlugin({
cache: true,
parallel: true, // 多进程压缩
sourceMap: true
}),
new OptimizeCSSAssetsPlugin({}) // 优化压缩css
]
}
}

© 2019 墨夜 All Rights Reserved.
Theme by hiero