1. 文档学习记录

安装webpack4

① 本地安装
npm install -save-dev webpack
npm install -save-dev webpack-cli
② 全局安装
npm install -global webpack webpack-cli

配置文件

  • wabpack.config.js (不指定文件时,默认使用)

  • webpack.config.dev.js

    • 开发环境使用

  • webpack.config.build.js

    • 生产环境使用

      npm 启动命令

      "scripts": {
    "dev": "webpack-dev-server  --config=config/webpack.config.dev.js",
    "dev:dist": "webpack --mode development --config=config/webpack.config.dev.js",
    "build": "webpack --mode production  --config=config/webpack.config.build.js"
},

开发环境配置文件

mode (模式)

  • development -- 开发环境 会将 DefinePlugin 中 process.env.NODE_ENV 的值 设置为 development。启用 NamedChunksPlugin 和 NamedModulesPlugin。

  • productiom -- 生产环境 **(默认值)** 会将 DefinePlugin 中 process.env.NODE_ENV 的值设置为 production。启用 FlagDependencyUsagePlugin, FlagIncludedChunksPlugin, ModuleConcatenationPlugin, NoEmitOnErrorsPlugin, OccurrenceOrderPlugin, SideEffectsFlagPlugin 和 TerserPlugin。

  • none -- 不设置可以在npm启动命令中添加参数

    • 退出任何默认优化选项

mode: development ```js module.exports = { + mode: 'development' - devtool: 'eval', - cache: true, - performance: { - hints: false - }, - output: { - pathinfo: true - }, - optimization: { - namedModules: true, - namedChunks: true, - nodeEnv: 'development', - flagIncludedChunks: false, - occurrenceOrder: false, - sideEffects: false, - usedExports: false, - concatenateModules: false, - splitChunks: { - hidePathInfo: false, - minSize: 10000, - maxAsyncRequests: Infinity, - maxInitialRequests: Infinity, - }, - noEmitOnErrors: false, - checkWasmTypes: false, - minimize: false, - }, - plugins: [ - new webpack.NamedModulesPlugin(), - new webpack.NamedChunksPlugin(), - new webpack.DefinePlugin({ "process.env.NODE_ENV": JSON.stringify("development") }), - ] } ```

mode: production ```js module.exports = { + mode: 'production', - performance: { - hints: 'warning' - }, - output: { - pathinfo: false - }, - optimization: { - namedModules: false, - namedChunks: false, - nodeEnv: 'production', - flagIncludedChunks: true, - occurrenceOrder: true, - sideEffects: true, - usedExports: true, - concatenateModules: true, - splitChunks: { - hidePathInfo: true, - minSize: 30000, - maxAsyncRequests: 5, - maxInitialRequests: 3, - }, - noEmitOnErrors: true, - checkWasmTypes: true, - minimize: true, - }, - plugins: [ - new TerserPlugin(/* ... */), - new webpack.DefinePlugin({ "process.env.NODE_ENV": JSON.stringify("production") }), - new webpack.optimize.ModuleConcatenationPlugin(), - new webpack.NoEmitOnErrorsPlugin() - ] } ```

mode: none ```js module.exports = { + mode: 'none', - performance: { - hints: false - }, - optimization: { - flagIncludedChunks: false, - occurrenceOrder: false, - sideEffects: false, - usedExports: false, - concatenateModules: false, - splitChunks: { - hidePathInfo: false, - minSize: 10000, - maxAsyncRequests: Infinity, - maxInitialRequests: Infinity, - }, - noEmitOnErrors: false, - checkWasmTypes: false, - minimize: false, - }, - plugins: [] }9910 ```

配置方法1

module.exports={
    mode:"development"
}

方法2

webpack --mode=production

根据环境选择打包方式(配置文件)

let config={
    entry:'./index.js',
    // ...code
}

module.exports=(env,argv)=>{
    let {mode}=argv;//获取当前的打包模式
    if(mode==='production'){
        config.devtool='source-map';
    }

    if(mode==='development'){
        config.devtool='xxx'
    }
    return config;
}

entry (入口文件)

默认 -- ./src/index.js(不指定的情况下)

单入口

  module.exports={
      entry:'./src/index.js'
  }

等价于

module.exports={
    entry:{
        main:'./src/index.js'
    }
}

参数为数组时

向 entry 属性传入文件路径数组时，将创建出一个多主入口chunk。在需要要一次注入多个依赖文件，并且将它们的依赖导向到一个 chunk

module.exports={
    entry:{
        main:['index.js','second.js']
    }
}

多入口(对象语法)

entry:{[entryName:String]:String|Array}

module.exports={
    entry:{
        index:'index.js',
        second:['s1.js','s2.js']
    }
}

多页面使用场景

推荐:一个HTML文档一个入口文件

module.export={
    entry:{
        pageone:'./src/pageone/index.js',
        pagetwo:'./src/pagetwo/index.js'
    }
}

output(输出配置)

控制 webpack 如何向硬盘写入编译文件。即使存在多个 entry 起点，但只指定一个 output 配置。

基本用法

  • filename:打包后的文件名 默认:main.js

  • path:打包后的路径 默认:./dist/

会在打包后的dist目录中生成bundle.js文件

module.export={
    output={
        filename:'bundle.js'
    }
}

占位符

  • [ext]：资源扩展名

  • [name]：资源的基本名称

  • [path]：资源相对于context的路径

  • [hash]：内容的哈希值

    多入口时

    使用文件名做占位符

    import path=require('path');
module.export={
  entry:{
      index:'index.js',
      second:'second.js'
  },
  output:{
      filename:'[name].js',//使用占位符
      path:path.join(__dirname,'dist/js')
  }
}

高级用法

module.export={
    output:{
        path:'/home/xxx/[hash]',
        publicPath:'http://img.cdn.xxx.com/dir/[hash]'
    }
}

动态设置

__webpack_public_path=myRuntimePublicPath

resolve(解析)

配置模块如何解析。例如，当在 ES2015 中调用 import 'lodash'，resolve 选项能够对 webpack 查找 'lodash' 的方式去做修改（查看模块）。

resolve.alias

创建 import或require别名

module.exports={
    resolve:{
        alias:{
            utils:path.resolve(__dirname,'src/util/')
        }
    }
}

导入

import jsonUtil from 'utils/jsonUtil'

resolve.modules

解析时搜索的目录

module.exports={
    resolve:{
        modules:[
            "node_modlues"
        ]
    }
}

loader

css-loader与style-loader

加载CSS

install

npm run i style-loader css-loader -D

使用

module.exports={
    module:{
        rules:[
             {
                  test:/\.css$/,//正则表达式,以.css结尾的文件
                 use: ['style-loader','css-loader']//顺序不能颠倒
            }
        ]
    }

}

配置方法

1.configuration

module.rules 允许你在 webpack 配置中指定多个 loader。 这种方式是展示 loader 的一种简明方式，并且有助于使代码变得简洁和易于维护。同时让你对各个 loader 有个全局概览： loader 从右到左地取值(evaluate)/执行(execute)。在下面的示例中，从 sass-loader 开始执行，然后继续执行 css-loader，最后以 style-loader 为结束。查看 loader 功能 了解有关 loader 顺序的更多信息。

  • test: 用于标识出应该被对应的 loader 进行转换的某个或某些文件。

  • use: 表示进行转换时，应该使用哪个 loader。

    ```js

    module.exports={

    module:{

      rules:[
   {
      test:/\.css$/,
      use: [
          { loader: 'style-loader' },
           {
              loader: 'css-loader',
              options: {
                  modules: true
              }
       },
       { loader: 'sass-loader' }
      ]
    }

    ]

    }

}

#### [2. inline(内联)](https://webpack.docschina.org/concepts/loaders/#%E5%86%85%E8%81%94-inline-)
#### [3. cli(脚手架)](https://webpack.docschina.org/concepts/loaders/#cli)

## plugin(插件)

插件则可以用于执行范围更广的任务。包括：打包优化，资源管理，注入环境变量。
>想要使用一个插件，你只需要 require() 它，然后把它添加到 plugins 数组中。多数插件可以通过选项(option)自定义。你也可以在一个配置文件中因为不同目的而多次使用同一个插件，这时需要通过使用 new 操作符来创建它的一个实例。

>[插件列表](https://webpack.docschina.org/plugins)
### 例子
#### html-webpack-plugin
```npm
npm i html-webpack-plugin -D
// 打包html
const htmlWebpackPlugin = require('html-webpack-plugin');
module.exports={
    plugins: [
        new htmlWebpackPlugin({
            filename: 'index.html',
            minify: {
                removeAttributeQuotes: false,//去掉参数双引号
                removeComments: false, //去掉注释
                collapseWhitespace: false //去掉空白
            },
            chunks: ['base', 'index'], //引入对应的js
            template: 'src/index.html'
        })
    ]
}

configuration(配置)

基本配置

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

常用详细配置(部分待完善))

module.exports={
    mode:"development",//可选development|production|none
    entry:'./src/index.js',//String|Array|Object
    output:{//输出配置
        //string
        //所有输出文件的目标路径
        //必须是绝对路径
        path:path.resolve(__dirname,'dist'),
        //string
        //[name].js 用于多入口(entry)
        //[chunkhash].js    用于长效缓存
        filename:'main.js',
        //输出解析文件的目录
        publicPath:'/assets/',//string
        //在生成代码时，引入相关的模块、导出、请求等有帮助的路径信息。
        pathInfo:true,
        //附加分块的文件名模板
        chunkFilename:"[id].js",
    },
    module:{
        rules:[//模块规则
            {  
                //规范只在文件名和test中使用正则
                //include和exclude使用绝对路径
                //避免使用exclude
                test:/\.jsx$/,//匹配条件
                include:[//必须匹配
                    path.resolve(__dirname,'app')
                ],
                exclude:[//必须不匹配
                    path.resolve(_dirname,'app/demo-files')
                ],
                issuer:[test,include,exlude],//导入源
                loader: 'xxx-loader',
                options: {
                    name: '[hash].[ext]',
                    outputPath: './img',
                    esModule: false//解决html中出现export default
                }
            }
        ]
    },
    //解析模块请求的选项
    //不适用于loader的解析
    resolve:{
        //用于查找模块的目录
        modules:[
        "node_modules",
        path.resolve(__dirname,'app')
        ],
        //使用的扩展名
        extensions:['.js','jsx','json','.css'],
        //模块别名
        alias:{
            moduleName:"module/path/file",
        }
    }
}
Previouswebpack4Next2. 加载CSS

Last updated