用 webpack 从零搭建自己的脚手架

安装 webpack

npm install --save-dev webpack

如果使用 webpack 4.0 还需要安装

npm install --save-dev webpack-cli

webpack 支持零配置,安装既可以打包,也可以自动配置

在没有配置的情况下,默认查找项目中 index.js 为打包入口, 找不到则无法打包

打包命令

npx webpack

npx webpack --config webpack.base.config.js 指定配置文件 npx webpack -- --colors 传递参数

配置打包命令的快捷方式

package.json -> scripts 下增加

开发环境
"dev": "webpack --config ./webpack.dev.config.js"

生产环境
"build": "webpack --config ./webpack.prod.config.js"

自定义配置文件

根目录下创建 webpack.config.js

再次 npx webpack 会从 webpack.config.js 读取配置

context
// 上下文是入口文件所处的目录的绝对路径的字符串。  
// 指定后的上下文 F:\my\webpack-template\webpack   
// 指定上下文之后 会影响以后的路径 
// 见 entry    

context: path.resolve(__dirname, 'webpack'),
复制代码
mode 模式
  • development
  • productions
  • none
entry 入口
entry: {
    // 单页面
    index: './src/index.js',
    index: ['./src/index.js', './src/js/a.js'],

    // 多页面
    index: './src/index.js',
    page1: './src/page1.js',
    page2: './src/page2.js'

    // 指定 context
    // index: '../src/index.js'
    // index: ['../src/index.js', '../src/js/a.js']
},
复制代码
output 出口
output: {
    filename: '[name].js',  // 动态名字, 根据入口而定
    // filename: '[name].[hash].js',    // hash 缓存
    path: path.resolve(__dirname, 'dist'),  // 目录对应一个绝对路径
    publicPath: '/',    // 引用资源的地址
}
复制代码

详细参数

module 模块
决定如何处理项目中的不同类型的模块
复制代码
  • rules 规则 配置 loader, loader 用于对模块的源代码进行转换

    • style-loader 将模块的导出作为样式添加到 DOM 中 style-loader 导致 loader 创建的 CSS 优先于目标中已经存在的 CSS (可通过 insert 来配置插入的位置)
    • css-loader 解析 CSS 文件后(将 CSS 转化成 CommonJS 模块),使用 import 加载,并且返回 CSS 代码
    • sass-loader 将 Sass 编译成 CSS
    • url-loader file-loader 处理图片 limit: 1024, // 当大于这个值时 默认使用 file-loader 处理
    • babel-loader 将 ES2015 转换成 ES5 babel-loader @babel/core @babel/preset-env
resolve 配置模块如何解析
```javascript
resolve: {
    modules: ["node_modules"],  // 告诉 webpack 解析模块时应该搜索的目录。
    extensions: ['.js', '.scss', '.css', '.jpg', 'jpge', '.png', '.gif'],   // 文件后缀
    alias: {    // 别名
        '@BScss': path.resolve(__dirname, 'node_modules/bootstrap/dist/css/'),
        '@js': path.resolve(__dirname, 'src/js')
    }
}
```
复制代码
plugins 插件
  • webpack-dev-server 开发服务器 npm install webpack-dev-server -D

配置项 devServer

devServer: {
    // 启动热更新 
    // 必须有 webpack.HotModuleReplacementPlugin 才能完全启用 HMR 
    // 启动时 添加参数 "dev": "webpack-dev-server --hotOnly --config ./webpack.dev.config.js"
    hot: true,  
    port: 8080,
    contentBase: './dist', // 告诉服务器从哪里读取资源
    open: true, // 自动打开浏览器
}
复制代码

修改启动命令

"scripts": {
    - "dev": "webpack --config ./webpack.dev.config.js"
    + "dev": "webpack-dev-server --config ./webpack.dev.config.js"
  },
复制代码

详细参数

  • clean-webpack-plugin 清空目录

  • copy-webpack-plugin 复制文件夹、文件

    to: '' 为空时默认输出到 output 中指定的目录

  • html-webpack-plugin 生成一个 HTML5 文件, 将 webpack 打包后的 js 插入 body 中 单页面配置一个、多页面配置多个

  • mini-css-extract-plugin 提取 css 到单独的文件并压缩

    代替 extract-text-webpack-plugin

  • purifycss-webpack CSS中删除未使用的选择器

    需配合 mini-css-extract-plugin 一起使用 如果没有输出任何CSS文件,则此插件将无效

  • autoprefixer 配合 postcss-loader 实现样式前缀的自动填充

    提供浏览器的最佳方法是.browserslistrc 在项目根目录中添加一个文件,
    或在 package.json 中添加一个 browserslist key

    // package.json
    
    "browserslist": [ 
        "> 1%",
        "last 2 versions"
    ]
    复制代码

    postcss-loader 放在 style-loader css-loader 之后
    postcss-loader 放在 sass-loader 之前

  • webpack.IgnorePlugin 忽略一些包中引入的其它的包

    // 忽略 moment 中默认的语言包
    new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)
    
    // 忽略后 需要设置语言包时需要手动引入
    import 'moment/locale/zh-cn'
    复制代码
  • webpack.DllPlugin 提前打不不经常变动的依赖包,提升构建速度

    output.library 必须与 webpack.DllPlugin(options) options.name 一样

  • add-asset-html-webpack-plugin 将 webpack.DllPlugin 打包好的依赖包 插入 html 中

  • happypack 多线程打包,提升构建速度

    可以处理 js、css
    大型项目效果更好

  • new webpack.DefinePlugin 编译期间添加的全局常量

optimization 优化
- splitChunks 分割代码
复制代码

  • 懒加载
// 懒加载会另外打包成一个 js
// 通过 jsonp 的形式实现动态加载的
const Lazy = () => import('@js/lazy')

setTimeout(() => {
    Lazy().then(_ => {
        _.default.subtraction(3, 5)
    })
}, 1000)


// 配合下面的使用
// 分离出 costomVue
custom: {
    test: path.resolve(__dirname, './src/js'),
    name: 'custom',
    chunks: 'all',
    minChunks: 2
}
复制代码
  • 使用 vue

    通过 yarn add vue 安装的 vue
    import vue from 'vue' 时 使用的是 vue.runtime.common.js 版本 vue -> package.json "main": "dist/vue.runtime.common.js"

    我们需要的是 vue.js
    需要配置别名 'vue$': 'vue/dist/vue.js'

源码地址

博文推荐

【笔记不易,如对您有帮助,请点赞,谢谢】

分类:
前端
标签: