精华内容
下载资源
问答
  • webpack配置

    2018-05-23 07:59:08
    webpack配置 配置 Webpack 的方式有两种: 通过一个 JavaScript 文件描述配置,例如使用 webpack.config.js 文件里的配置; 执行 Webpack 可执行文件时通过命令行参数传入,例如 webpack --devtool source-map。 ...

    webpack配置

    配置 Webpack 的方式有两种:

    1. 通过一个 JavaScript 文件描述配置,例如使用 webpack.config.js 文件里的配置;
    2. 执行 Webpack 可执行文件时通过命令行参数传入,例如 webpack --devtool source-map

    这两种方式可以相互搭配,例如执行 Webpack 时通过命令 webpack --config webpack-dev.config.js 指定配置文件,再去 webpack-dev.config.js 文件里描述部分配置。

    按照配置所影响的功能来划分,可分为:

    • Entry 配置模块的入口;
    • Output 配置如何输出最终想要的代码;
    • Module 配置处理模块的规则;
    • Resolve 配置寻找模块的规则;
    • Plugins 配置扩展插件;
    • DevServer 配置 DevServer;
    • 其它配置项 其它零散的配置项;
    • 整体配置结构 整体地描述各配置项的结构;
    • 多种配置类型 配置文件不止可以返回一个 Object,还有其他返回形式;
    • 配置总结 寻找配置 Webpack 的规律,减少思维负担。

    Entry

    Webpack 在寻找相对路径的文件时会以 context 为根目录,context 默认为执行启动 Webpack 时所在的当前工作目录。

    如果想改变 context 的默认配置,可以在配置文件里设置:

    module.exports = {
      context: path.resolve(__dirname, 'app')
    }
    

    注意, context 必须是一个绝对路径的字符串。 除此之外,还可以通过在启动 Webpack 时带上参数 webpack --context 来设置 context。

    Chunk 名称

    Webpack 会为每个生成的 Chunk 取一个名称,Chunk 的名称和 Entry 的配置有关:

    • 如果 entry 是一个 stringarray,就只会生成一个 Chunk,这时 Chunk 的名称是 main
    • 如果 entry 是一个 object,就可能会出现多个 Chunk,这时 Chunk 的名称是 object 键值对里键的名称。

    配置动态 Entry

    假如项目里有多个页面需要为每个页面的入口配置一个 Entry ,但这些页面的数量可能会不断增长,则这时 Entry 的配置会受到到其他因素的影响导致不能写成静态的值。其解决方法是把 Entry 设置成一个函数去动态返回上面所说的配置,代码如下:

    // 同步函数
    entry: () => {
      return {
        a:'./pages/a',
        b:'./pages/b',
      }
    };
    // 异步函数
    entry: () => {
      return new Promise((resolve)=>{
        resolve({
           a:'./pages/a',
           b:'./pages/b',
        });
      });
    };
    

    Output

    output 配置如何输出最终想要的代码。output 是一个 object,里面包含一系列配置项:

    filename

    output.filename 配置输出文件的名称,为 string 类型。 如果只有一个输出文件,则可以把它写成静态不变的:

    filename: 'bundle.js'
    

    但是在有多个 Chunk 要输出时,就需要借助模版和变量了。前面说到 Webpack 会为每个 Chunk取一个名称,可以根据 Chunk 的名称来区分输出的文件名:

    filename: '[name].js'
    

    代码里的 [name] 代表用内置的 name 变量去替换[name],这时你可以把它看作一个字符串模块函数, 每个要输出的 Chunk 都会通过这个函数去拼接出输出的文件名称。

    变量名含义
    idChunk 的唯一标识,从0开始
    nameChunk 的名称
    hashChunk 的唯一标识的 Hash 值
    chunkhashChunk 内容的 Hash 值

    其中 hashchunkhash 的长度是可指定的,[hash:8] 代表取8位 Hash 值,默认是20位。

    注意 ExtractTextWebpackPlugin 插件是使用 contenthash 来代表哈希值而不是 chunkhash, 原因在于 ExtractTextWebpackPlugin 提取出来的内容是代码内容本身而不是由一组模块组成的 Chunk。

    chunkFilename

    output.chunkFilename 配置无入口的 Chunk 在输出时的文件名称。 chunkFilename 和上面的 filename 非常类似,但 chunkFilename 只用于指定在运行过程中生成的 Chunk 在输出时的文件名称。 常见的会在运行时生成 Chunk 场景有在使用 CommonChunkPlugin、使用 import('path/to/module') 动态加载等时。 chunkFilename 支持和 filename 一致的内置变量。

    path

    output.path 配置输出文件存放在本地的目录,必须是 string 类型的绝对路径。通常通过 Node.js 的 path 模块去获取绝对路径:

    path: path.resolve(__dirname, 'dist_[hash]')
    

    publicPath

    在复杂的项目里可能会有一些构建出的资源需要异步加载,加载这些异步资源需要对应的 URL 地址。

    output.publicPath 配置发布到线上资源的 URL 前缀,为string 类型。 默认值是空字符串 '',即使用相对路径。

    把构建出的资源文件上传到 CDN 服务上,以利于加快页面的打开速度。配置代码如下:

    filename:'[name]_[chunkhash:8].js'
    publicPath: 'https://cdn.example.com/assets/'
    

    这时发布到线上的 HTML 在引入 JavaScript 文件时就需要:

    <script src='https://cdn.example.com/assets/a_12345678.js'></script>
    

    使用该配置项时要小心,稍有不慎将导致资源加载404错误。

    output.pathoutput.publicPath 都支持字符串模版,内置变量只有一个:hash 代表一次编译操作的 Hash 值。

    crossOriginLoading

    Webpack 输出的部分代码块可能需要异步加载,而异步加载是通过 JSONP 方式实现的。 JSONP 的原理是动态地向 HTML 中插入一个 <script src="url"></script> 标签去加载异步资源。

    output.crossOriginLoading 则是用于配置这个异步插入的标签的 crossorigin 值。

    script 标签的 crossorigin 属性可以取以下值:

    • anonymous(默认) 在加载此脚本资源时不会带上用户的 Cookies;
    • use-credentials 在加载此脚本资源时会带上用户的 Cookies。

    通常用设置 crossorigin 来获取异步加载的脚本执行时的详细错误信息。

    libraryTarget 和 library

    当用 Webpack 去构建一个可以被其他模块导入使用的库时需要用到它们。

    • output.libraryTarget 配置以何种方式导出库。
    • output.library 配置导出库的名称。

    假如配置了 output.library='LibraryName',则输出和使用的代码如下:

    // Webpack 输出的代码
    var LibraryName = lib_code;
    
    // 使用库的方法
    LibraryName.doSomething();
    

    假如 output.library 为空,则将直接输出:lib_code

    其中 lib_code 代指导出库的代码内容,是有返回值的一个自执行函数。

    它们通常搭配在一起使用。

    output.libraryTarget 是字符串的枚举类型,支持以下配置。

    var (默认)

    编写的库将通过 var 被赋值给通过 library 指定名称的变量。

    commonjs

    编写的库将通过 CommonJS2 规范导出,输出和使用的代码如下:

    // Webpack 输出的代码
    module.exports = lib_code;
    
    // 使用库的方法
    require('library-name-in-npm').doSomething();
    

    CommonJS2 和 CommonJS 规范很相似,差别在于 CommonJS 只能用 exports 导出,而 CommonJS2 在 CommonJS 的基础上增加了 module.exports 的导出方式。

    output.libraryTarget 为 commonjs2 时,配置 output.library 将没有意义。

    this

    编写的库将通过 this 被赋值给通过 library 指定的名称,输出和使用的代码如下:

    // Webpack 输出的代码
    this['LibraryName'] = lib_code;

    // 使用库的方法
    this.LibraryName.doSomething();

    window

    编写的库将通过 window 被赋值给通过 library 指定的名称,即把库挂载到 window 上,输出和使用的代码如下:

    // Webpack 输出的代码
    window['LibraryName'] = lib_code;
    
    // 使用库的方法
    window.LibraryName.doSomething();
    

    global

    编写的库将通过 global 被赋值给通过 library 指定的名称,即把库挂载到 global 上,输出和使用的代码如下:

    
    // Webpack 输出的代码
    global['LibraryName'] = lib_code;
    
    // 使用库的方法
    global.LibraryName.doSomething();
    

    libraryExport

    output.libraryExport 配置要导出的模块中哪些子模块需要被导出。 它只有在 output.libraryTarget 被设置成 commonjs 或者 commonjs2 时使用才有意义。

    假如要导出的模块源代码是:

    export const a=1;
    export default b=2;
    

    现在想让构建输出的代码只导出其中的 a,可以把 output.libraryExport 设置成 a,那么构建输出的代码和使用方法将变成如下:

    // Webpack 输出的代码
    module.exports = lib_code['a'];
    
    // 使用库的方法
    require('library-name-in-npm')===1;
    

    Module

    配置 Loader

    rules 配置模块的读取和解析规则,通常用来配置 Loader。其类型是一个数组,数组里每一项都描述了如何去处理部分文件。 配置一项 rules 时大致通过以下方式:

    1. 条件匹配:通过 testincludeexclude 三个配置项来命中 Loader 要应用规则的文件。
    2. 应用规则:对选中后的文件通过 use 配置项来应用 Loader,可以只应用一个 Loader 或者按照从后往前的顺序应用一组 Loader,同时还可以分别给 Loader 传入参数。
    3. 重置顺序:一组 Loader 的执行顺序默认是从右到左执行,通过 enforce 选项可以让其中一个 Loader 的执行顺序放到最前或者最后。
    module: {
      rules: [
        {
          // 命中 JavaScript 文件
          test: /\.js$/,
          // 用 babel-loader 转换 JavaScript 文件
          // ?cacheDirectory 表示传给 babel-loader 的参数,用于缓存 babel 编译结果加快重新编译速度
          use: ['babel-loader?cacheDirectory'],
          // 只命中src目录里的js文件,加快 Webpack 搜索速度
          include: path.resolve(__dirname, 'src')
        },
        {
          // 命中 SCSS 文件
          test: /\.scss$/,
          // 使用一组 Loader 去处理 SCSS 文件。
          // 处理顺序为从后到前,即先交给 sass-loader 处理,再把结果交给 css-loader 最后再给 style-loader。
          use: ['style-loader', 'css-loader', 'sass-loader'],
          // 排除 node_modules 目录下的文件
          exclude: path.resolve(__dirname, 'node_modules'),
        },
        {
          // 对非文本文件采用 file-loader 加载
          test: /\.(gif|png|jpe?g|eot|woff|ttf|svg|pdf)$/,
          use: ['file-loader'],
        },
      ]
    }

    在 Loader 需要传入很多参数时,你还可以通过一个 Object 来描述,例如在上面的 babel-loader 配置中有如下代码:

    use: [
      {
        loader:'babel-loader',
        options:{
          cacheDirectory:true,
        },
        // enforce:'post' 的含义是把该 Loader 的执行顺序放到最后
        // enforce 的值还可以是 pre,代表把 Loader 的执行顺序放到最前面
        enforce:'post'
      },
      // 省略其它 Loader
    ]
    

    上面的例子中 test include exclude 这三个命中文件的配置项只传入了一个字符串或正则,其实它们还都支持数组类型,使用如下:

    {
      test:[
        /\.jsx?$/,
        /\.tsx?$/
      ],
      include:[
        path.resolve(__dirname, 'src'),
        path.resolve(__dirname, 'tests'),
      ],
      exclude:[
        path.resolve(__dirname, 'node_modules'),
        path.resolve(__dirname, 'bower_modules'),
      ]
    }
    

    数组里的每项之间是的关系,即文件路径符合数组中的任何一个条件就会被命中。

    noParse

    noParse 配置项可以让 Webpack 忽略对部分没采用模块化的文件的递归解析和处理,这样做的好处是能提高构建性能。 原因是一些库例如 jQuery 、ChartJS 它们庞大又没有采用模块化标准,让 Webpack 去解析这些文件耗时又没有意义。

    noParse 是可选配置项,类型需要是 RegExp[RegExp]function 其中一个。

    例如想要忽略掉 jQuery 、ChartJS,可以使用如下代码:

    // 使用正则表达式
    noParse: /jquery|chartjs/
    
    // 使用函数,从 Webpack 3.0.0 开始支持
    noParse: (content)=> {
      // content 代表一个模块的文件路径
      // 返回 true or false
      return /jquery|chartjs/.test(content);
    }
    

    注意被忽略掉的文件里不应该包含 importrequiredefine 等模块化语句,不然会导致构建出的代码中包含无法在浏览器环境下执行的模块化语句。

    parser

    因为 Webpack 是以模块化的 JavaScript 文件为入口,所以内置了对模块化 JavaScript 的解析功能,支持 AMDCommonJSSystemJSES6

    parser 属性可以更细粒度的配置哪些模块语法要解析哪些不解析,和 noParse 配置项的区别在于 parser 可以精确到语法层面, 而 noParse 只能控制哪些文件不被解析。 parser 使用如下:

    module: {
      rules: [
        {
          test: /\.js$/,
          use: ['babel-loader'],
          parser: {
          amd: false, // 禁用 AMD
          commonjs: false, // 禁用 CommonJS
          system: false, // 禁用 SystemJS
          harmony: false, // 禁用 ES6 import/export
          requireInclude: false, // 禁用 require.include
          requireEnsure: false, // 禁用 require.ensure
          requireContext: false, // 禁用 require.context
          browserify: false, // 禁用 browserify
          requireJs: false, // 禁用 requirejs
          }
        },
      ]
    }
    

    Resolve

    Webpack 在启动后会从配置的入口模块出发找出所有依赖的模块,Resolve 配置 Webpack 如何寻找模块所对应的文件。 Webpack 内置 JavaScript 模块化语法解析功能,默认会采用模块化标准里约定好的规则去寻找,但你也可以根据自己的需要修改默认的规则。

    alias

    resolve.alias 配置项通过别名来把原导入路径映射成一个新的导入路径。例如使用以下配置:

    // Webpack alias 配置
    resolve:{
      alias:{
        components: './src/components/'
      }
    }
    

    当你通过 import Button from 'components/button' 导入时,实际上被 alias 等价替换成了 import Button from './src/components/button'

    以上 alias 配置的含义是把导入语句里的 components 关键字替换成 ./src/components/

    这样做可能会命中太多的导入语句,alias 还支持 $ 符号来缩小范围到只命中以关键字结尾的导入语句:

    resolve:{
      alias:{
        'react$': '/path/to/react.min.js'
      }
    }
    

    react$ 只会命中以 react 结尾的导入语句,即只会把 import 'react' 关键字替换成 import '/path/to/react.min.js'

    mainFields

    有一些第三方模块会针对不同环境提供几分代码。 例如分别提供采用 ES5 和 ES6 的2份代码,这2份代码的位置写在 package.json文件里,如下:

    {
      "jsnext:main": "es/index.js",// 采用 ES6 语法的代码入口文件
      "main": "lib/index.js" // 采用 ES5 语法的代码入口文件
    }
    

    Webpack 会根据 mainFields 的配置去决定优先采用哪份代码,mainFields 默认如下:

    mainFields: ['browser', 'main']
    

    Webpack 会按照数组里的顺序去 package.json 文件里寻找,只会使用找到的第一个。

    假如你想优先采用 ES6 的那份代码,可以这样配置:

    mainFields: ['jsnext:main', 'browser', 'main']
    

    extensions

    在导入语句没带文件后缀时,Webpack 会自动带上后缀后去尝试访问文件是否存在。 resolve.extensions 用于配置在尝试过程中用到的后缀列表,默认是:

    extensions: ['.js', '.json']
    

    modules

    resolve.modules 配置 Webpack 去哪些目录下寻找第三方模块,默认是只会去 node_modules 目录下寻找。

    有时你的项目里会有一些模块会大量被其它模块依赖和导入,由于其它模块的位置分布不定,针对不同的文件都要去计算被导入模块文件的相对路径, 这个路径有时候会很长,就像这样 import '../../../components/button' 这时你可以利用 modules 配置项优化,假如那些被大量导入的模块都在 ./src/components 目录下,把 modules 配置成:

    modules:['./src/components','node_modules']
    

    后,你可以简单通过 import 'button' 导入。

    descriptionFiles

    resolve.descriptionFiles 配置描述第三方模块的文件名称,也就是 package.json 文件。默认如下:

    descriptionFiles: ['package.json']
    

    enforceExtension

    resolve.enforceExtension 如果配置为 true 所有导入语句都必须要带文件后缀, 例如开启前 import './foo' 能正常工作,开启后就必须写成 import './foo.js'

    enforceModuleExtension

    enforceModuleExtensionenforceExtension 作用类似,但 enforceModuleExtension 只对 node_modules 下的模块生效。

    enforceModuleExtension 通常搭配 enforceExtension 使用,在 enforceExtension:true 时,因为安装的第三方模块中大多数导入语句没带文件后缀, 所以这时通过配置 enforceModuleExtension:false 来兼容第三方模块。

    Plugins

    Plugin 用于扩展 Webpack 功能,各种各样的 Plugin 几乎让 Webpack 可以做任何构建相关的事情。

    配置 Plugin

    Plugin 的配置很简单,plugins 配置项接受一个数组,数组里每一项都是一个要使用的 Plugin 的实例,Plugin 需要的参数通过构造函数传入。

    const CommonsChunkPlugin = require('webpack/lib/optimize/CommonsChunkPlugin');
    
    module.exports = {
      plugins: [
        // 所有页面都会用到的公共代码提取到 common 代码块中
        new CommonsChunkPlugin({
          name: 'common',
          chunks: ['a', 'b']
        }),
      ]
    };
    

    使用 Plugin 的难点在于掌握 Plugin 本身提供的配置项,而不是如何在 Webpack 中接入 Plugin。

    DevServer

    要配置 DevServer ,除了在配置文件里通过 devServer 传入参数外,还可以通过命令行参数传入。 注意只有在通过 DevServer 去启动 Webpack 时配置文件里 devServer 才会生效,因为这些参数所对应的功能都是 DevServer 提供的,Webpack 本身并不认识 devServer 配置项。

    hot

    devServer.hot 配置是否启用模块热替换功能。

    DevServer 默认的行为是在发现源代码被更新后会通过自动刷新整个页面来做到实时预览,开启模块热替换功能后将在不刷新整个页面的情况下通过用新模块替换老模块来做到实时预览。

    inline

    DevServer 的实时预览功能依赖一个注入到页面里的代理客户端去接受来自 DevServer 的命令和负责刷新网页的工作。

    devServer.inline 用于配置是否自动注入这个代理客户端到将运行在页面里的 Chunk 里去,默认是会自动注入。 DevServer 会根据你是否开启 inline 来调整它的自动刷新策略:

    • 如果开启 inline,DevServer 会在构建完变化后的代码时通过代理客户端控制网页刷新。
    • 如果关闭 inline,DevServer 将无法直接控制要开发的网页。这时它会通过 iframe 的方式去运行要开发的网页,当构建完变化后的代码时通过刷新 iframe 来实现实时预览。

    如果你想使用 DevServer 去自动刷新网页实现实时预览,最方便的方法是直接开启 inline

    historyApiFallback

    devServer.historyApiFallback 用于方便的开发使用了 HTML5 History API 的单页应用。

    这类单页应用要求服务器在针对任何命中的路由时都返回一个对应的 HTML 文件,例如在访问 http://localhost/userhttp://localhost/home 时都返回 index.html 文件, 浏览器端的 JavaScript 代码会从 URL 里解析出当前页面的状态,显示出对应的界面。

    配置 historyApiFallback 最简单的做法是:

    historyApiFallback: true
    

    这会导致任何请求都会返回 index.html 文件,这只能用于只有一个 HTML 文件的应用。

    如果你的应用由多个单页应用组成,这就需要 DevServer 根据不同的请求来返回不同的 HTML 文件,配置如下:

    historyApiFallback: {
      // 使用正则匹配命中路由
      rewrites: [
        // /user 开头的都返回 user.html
        { from: /^\/user/, to: '/user.html' },
        { from: /^\/game/, to: '/game.html' },
        // 其它的都返回 index.html
        { from: /./, to: '/index.html' },
      ]
    }
    

    contentBase

    devServer.contentBase 配置 DevServer HTTP 服务器的文件根目录。 默认情况下为当前执行目录,通常是项目根目录,所有一般情况下你不必设置它,除非你有额外的文件需要被 DevServer 服务。 例如你想把项目根目录下的 public 目录设置成 DevServer 服务器的文件根目录,你可以这样配置:

    devServer:{
      contentBase: path.join(__dirname, 'public')
    }
    

    这里需要指出可能会让你疑惑的地方,DevServer 服务器通过 HTTP 服务暴露出的文件分为两类:

    • 暴露本地文件。
    • 暴露 Webpack 构建出的结果,由于构建出的结果交给了 DevServer,所以你在使用了 DevServer 时在本地找不到构建出的文件。

    contentBase 只能用来配置暴露本地文件的规则,你可以通过 contentBase:false 来关闭暴露本地文件。

    headers

    devServer.headers 配置项可以在 HTTP 响应中注入一些 HTTP 响应头,使用如下:

    devServer:{
      headers: {
        'X-foo':'bar'
      }
    }
    

    host

    devServer.host 配置项用于配置 DevServer 服务监听的地址。

    例如你想要局域网中的其它设备访问你本地的服务,可以在启动 DevServer 时带上 --host 0.0.0.0host 的默认值是 127.0.0.1即只有本地可以访问 DevServer 的 HTTP 服务。

    port

    devServer.port 配置项用于配置 DevServer 服务监听的端口,默认使用 8080 端口。 如果 8080 端口已经被其它程序占有就使用 8081,如果 8081 还是被占用就使用 8082,以此类推。

    allowedHosts

    devServer.allowedHosts 配置一个白名单列表,只有 HTTP 请求的 HOST 在列表里才正常返回,使用如下:

    allowedHosts: [
      // 匹配单个域名
      'host.com',
      'sub.host.com',
      // host2.com 和所有的子域名 *.host2.com 都将匹配
      '.host2.com'
    ]
    

    disableHostCheck

    devServer.disableHostCheck 配置项用于配置是否关闭用于 DNS 重绑定的 HTTP 请求的 HOST 检查。

    DevServer 默认只接受来自本地的请求,关闭后可以接受来自任何 HOST 的请求。 它通常用于搭配 --host 0.0.0.0 使用,因为你想要其它设备访问你本地的服务,但访问时是直接通过 IP 地址访问而不是 HOST 访问,所以需要关闭 HOST 检查。

    https

    DevServer 默认使用 HTTP 协议服务,它也能通过 HTTPS 协议服务。 有些情况下你必须使用 HTTPS,例如 HTTP2 和 Service Worker 就必须运行在 HTTPS 之上。 要切换成 HTTPS 服务,最简单的方式是:

    devServer:{
      https: true
    }
    

    DevServer 会自动的为你生成一份 HTTPS 证书。

    如果你想用自己的证书可以这样配置:

    devServer:{
      https: {
        key: fs.readFileSync('path/to/server.key'),
        cert: fs.readFileSync('path/to/server.crt'),
        ca: fs.readFileSync('path/to/ca.pem')
      }
    }
    

    clientLogLevel

    devServer.clientLogLevel 配置在客户端的日志等级,这会影响到你在浏览器开发者工具控制台里看到的日志内容。

    clientLogLevel枚举类型,可取如下之一的值 none | error | warning | info。 默认为 info 级别,即输出所有类型的日志,设置成 none 可以不输出任何日志。

    compress

    devServer.compress 配置是否启用 gzip 压缩。boolean 为类型,默认为 false

    open

    devServer.open 用于在 DevServer 启动且第一次构建完时自动用你系统上默认的浏览器去打开要开发的网页。 同时还提供 devServer.openPage 配置项用于打开指定 URL 的网页。

    其它配置项

    Target

    target 配置项可以让 Webpack 构建出针对不同运行环境的代码。 target 可以是以下之一:

    target值描述
    web针对浏览器 (默认),所有代码都集中在一个文件里
    node针对 Node.js,使用 require 语句加载 Chunk 代码
    async-node针对 Node.js,异步加载 Chunk 代码
    webworker针对 WebWorker
    electron-main针对 Electron 主线程
    electron-renderer针对 Electron 渲染线程

    例如当你设置 target:'node' 时,源代码中导入 Node.js 原生模块的语句 require('fs') 将会被保留,fs 模块的内容不会打包进 Chunk 里。

    Devtool

    devtool 配置 Webpack 如何生成 Source Map,默认值是 false 即不生成 Source Map,想为构建出的代码生成 Source Map 以方便调试,可以这样配置:

    module.export = {
      devtool: 'source-map'
    }
    

    Watch 和 WatchOptions

    前面介绍过 Webpack 的监听模式,它支持监听文件更新,在文件发生变化时重新编译。在使用 Webpack 时监听模式默认是关闭的,想打开需要如下配置:

    module.export = {
      watch: true
    }
    

    在使用 DevServer 时,监听模式默认是开启的。

    除此之外,Webpack 还提供了 watchOptions 配置项去更灵活的控制监听模式,使用如下:

    module.export = {
      // 只有在开启监听模式时,watchOptions 才有意义
      // 默认为 false,也就是不开启
      watch: true,
      // 监听模式运行时的参数
      // 在开启监听模式时,才有意义
      watchOptions: {
        // 不监听的文件或文件夹,支持正则匹配
        // 默认为空
        ignored: /node_modules/,
        // 监听到变化发生后会等300ms再去执行动作,防止文件更新太快导致重新编译频率太高
        // 默认为 300ms  
        aggregateTimeout: 300,
        // 判断文件是否发生变化是通过不停的去询问系统指定文件有没有变化实现的
        // 默认每1000豪秒去问1次
        poll: 1000
      }
    }
    

    Externals

    Externals 用来告诉 Webpack 要构建的代码中使用了哪些不用被打包的模块,也就是说这些模版是外部环境提供的,Webpack 在打包时可以忽略它们。

    有些 JavaScript 运行环境可能内置了一些全局变量或者模块,例如在你的 HTML HEAD 标签里通过以下代码:

    <script src="path/to/jquery.js"></script>
    

    引入 jQuery 后,全局变量 jQuery 就会被注入到网页的 JavaScript 运行环境里。

    如果想在使用模块化的源代码里导入和使用 jQuery,可能需要这样:

    import $ from 'jquery';
    $('.my-element');
    

    构建后你会发现输出的 Chunk 里包含的 jQuery 库的内容,这导致 jQuery 库出现了2次,浪费加载流量,最好是 Chunk 里不会包含 jQuery 库的内容。

    Externals 配置项就是为了解决这个问题。

    通过 externals 可以告诉 Webpack JavaScript 运行环境已经内置了那些全局变量,针对这些全局变量不用打包进代码中而是直接使用全局变量。 要解决以上问题,可以这样配置 externals

    module.export = {
      externals: {
        // 把导入语句里的 jquery 替换成运行环境里的全局变量 jQuery
        jquery: 'jQuery'
      }
    }
    

    ResolveLoader

    ResolveLoader 用来告诉 Webpack 如何去寻找 Loader,因为在使用 Loader 时是通过其包名称去引用的, Webpack 需要根据配置的 Loader 包名去找到 Loader 的实际代码,以调用 Loader 去处理源文件。

    ResolveLoader 的默认配置如下:

    module.exports = {
      resolveLoader:{
        // 去哪个目录下寻找 Loader
        modules: ['node_modules'],
        // 入口文件的后缀
        extensions: ['.js', '.json'],
        // 指明入口文件位置的字段
        mainFields: ['loader', 'main']
      }
    }
    

    该配置项常用于加载本地的 Loader。

    整体配置结构

    之前的章节分别讲述了每个配置项的具体含义,但没有描述它们所处的位置和数据结构,下面通过一份代码来描述清楚:

    const path = require('path');
    
    module.exports = {
        // entry 表示 入口,Webpack 执行构建的第一步将从 Entry 开始,可抽象成输入。
        // 类型可以是 string | object | array
        entry: './app/entry', // 只有1个入口,入口只有1个文件
        entry: ['./app/entry1', './app/entry2'], // 只有1个入口,入口有2个文件
        entry: { // 有2个入口
            a: './app/entry-a',
            b: ['./app/entry-b1', './app/entry-b2']
        },
    
        // 如何输出结果:在 Webpack 经过一系列处理后,如何输出最终想要的代码。
        output: {
            // 输出文件存放的目录,必须是 string 类型的绝对路径。
            path: path.resolve(__dirname, 'dist'),
    
            // 输出文件的名称
            filename: 'bundle.js', // 完整的名称
            filename: '[name].js', // 当配置了多个 entry 时,通过名称模版为不同的 entry 生成不同的文件名称
            filename: '[chunkhash].js', // 根据文件内容 hash 值生成文件名称,用于浏览器长时间缓存文件
    
            // 发布到线上的所有资源的 URL 前缀,string 类型
            publicPath: '/assets/', // 放到指定目录下
            publicPath: '', // 放到根目录下
            publicPath: 'https://cdn.example.com/', // 放到 CDN 上去
    
            // 导出库的名称,string 类型
            // 不填它时,默认输出格式是匿名的立即执行函数
            library: 'MyLibrary',
    
            // 导出库的类型,枚举类型,默认是 var
            // 可以是 umd | umd2 | commonjs2 | commonjs | amd | this | var | assign | window | global | jsonp ,
            libraryTarget: 'umd',
    
            // 是否包含有用的文件路径信息到生成的代码里去,boolean 类型
            pathinfo: true,
    
            // 附加 Chunk 的文件名称
            chunkFilename: '[id].js',
            chunkFilename: '[chunkhash].js',
    
            // JSONP 异步加载资源时的回调函数名称,需要和服务端搭配使用
            jsonpFunction: 'myWebpackJsonp',
    
            // 生成的 Source Map 文件名称
            sourceMapFilename: '[file].map',
    
            // 浏览器开发者工具里显示的源码模块名称
            devtoolModuleFilenameTemplate: 'webpack:///[resource-path]',
    
            // 异步加载跨域的资源时使用的方式
            crossOriginLoading: 'use-credentials',
            crossOriginLoading: 'anonymous',
            crossOriginLoading: false,
        },
    
        // 配置模块相关
        module: {
            rules: [ // 配置 Loader
                {
                    test: /\.jsx?$/, // 正则匹配命中要使用 Loader 的文件
                    include: [ // 只会命中这里面的文件
                        path.resolve(__dirname, 'app')
                    ],
                    exclude: [ // 忽略这里面的文件
                        path.resolve(__dirname, 'app/demo-files')
                    ],
                    use: [ // 使用那些 Loader,有先后次序,从后往前执行
                        'style-loader', // 直接使用 Loader 的名称
                        {
                            loader: 'css-loader',
                            options: { // 给 html-loader 传一些参数
                            }
                        }
                    ]
                },
            ],
            noParse: [ // 不用解析和处理的模块
                /special-library\.js$/  // 用正则匹配
            ],
        },
    
        // 配置插件
        plugins: [],
    
        // 配置寻找模块的规则
        resolve: {
            modules: [ // 寻找模块的根目录,array 类型,默认以 node_modules 为根目录
                'node_modules',
                path.resolve(__dirname, 'app')
            ],
            extensions: ['.js', '.json', '.jsx', '.css'], // 模块的后缀名
            alias: { // 模块别名配置,用于映射模块
                // 把 'module' 映射 'new-module',同样的 'module/path/file' 也会被映射成 'new-module/path/file'
                'module': 'new-module',
                // 使用结尾符号 $ 后,把 'only-module' 映射成 'new-module',
                // 但是不像上面的,'module/path/file' 不会被映射成 'new-module/path/file'
                'only-module$': 'new-module',
            },
            alias: [ // alias 还支持使用数组来更详细的配置
                {
                    name: 'module', // 老的模块
                    alias: 'new-module', // 新的模块
                    // 是否是只映射模块,如果是 true 只有 'module' 会被映射,如果是 false 'module/inner/path' 也会被映射
                    onlyModule: true,
                }
            ],
            symlinks: true, // 是否跟随文件软链接去搜寻模块的路径
            descriptionFiles: ['package.json'], // 模块的描述文件
            mainFields: ['main'], // 模块的描述文件里的描述入口的文件的字段名称
            enforceExtension: false, // 是否强制导入语句必须要写明文件后缀
        },
    
        // 输出文件性能检查配置
        performance: {
            hints: 'warning', // 有性能问题时输出警告
            hints: 'error', // 有性能问题时输出错误
            hints: false, // 关闭性能检查
            maxAssetSize: 200000, // 最大文件大小 (单位 bytes)
            maxEntrypointSize: 400000, // 最大入口文件大小 (单位 bytes)
            assetFilter: function (assetFilename) { // 过滤要检查的文件
                return assetFilename.endsWith('.css') || assetFilename.endsWith('.js');
            }
        },
    
        devtool: 'source-map', // 配置 source-map 类型
    
        context: __dirname, // Webpack 使用的根目录,string 类型必须是绝对路径
    
        // 配置输出代码的运行环境
        target: 'web', // 浏览器,默认
        target: 'webworker', // WebWorker
        target: 'node', // Node.js,使用 `require` 语句加载 Chunk 代码
        target: 'async-node', // Node.js,异步加载 Chunk 代码
        target: 'node-webkit', // nw.js
        target: 'electron-main', // electron, 主线程
        target: 'electron-renderer', // electron, 渲染线程
    
        externals: { // 使用来自 JavaScript 运行环境提供的全局变量
            jquery: 'jQuery'
        },
    
        stats: { // 控制台输出日志控制
            assets: true,
            colors: true,
            errors: true,
            errorDetails: true,
            hash: true,
        },
    
        devServer: { // DevServer 相关的配置
            proxy: { // 代理到后端服务接口
                '/api': 'http://localhost:3000'
            },
            contentBase: path.join(__dirname, 'public'), // 配置 DevServer HTTP 服务器的文件根目录
            compress: true, // 是否开启 gzip 压缩
            historyApiFallback: true, // 是否开发 HTML5 History API 网页
            hot: true, // 是否开启模块热替换功能
            https: false, // 是否开启 HTTPS 模式
        },
    
        profile: true, // 是否捕捉 Webpack 构建的性能信息,用于分析什么原因导致构建性能不佳
    
        cache: false, // 是否启用缓存提升构建速度
    
        watch: true, // 是否开始
        watchOptions: { // 监听模式选项
            // 不监听的文件或文件夹,支持正则匹配。默认为空
            ignored: /node_modules/,
            // 监听到变化发生后会等300ms再去执行动作,防止文件更新太快导致重新编译频率太高
            // 默认为300ms
            aggregateTimeout: 300,
            // 判断文件是否发生变化是不停的去询问系统指定文件有没有变化,默认每秒问 1000 次
            poll: 1000
        },
    };

    多种配置类型

    除了通过导出一个 Object 来描述 Webpack 所需的配置外,还有其它更灵活的方式,以简化不同场景的配置。

    导出一个 Function

    在大多数时候你需要从同一份源代码中构建出多份代码,例如一份用于开发时,一份用于发布到线上。

    如果采用导出一个 Object 来描述 Webpack 所需的配置的方法,需要写两个文件。 一个用于开发环境,一个用于线上环境。再在启动时通过 webpack --config webpack.config.js 指定使用哪个配置文件。

    采用导出一个 Function 的方式,能通过 JavaScript 灵活的控制配置,做到只写一个配置文件就能完成以上要求。

    导出一个 Function 的使用方式如下:

    const path = require('path');
    const UglifyJsPlugin = require('webpack/lib/optimize/UglifyJsPlugin');
    
    module.exports = function (env = {}, argv) {
        const plugins = [];
    
        const isProduction = env['production'];
    
        // 在生成环境才压缩
        if (isProduction) {
            plugins.push(
                // 压缩输出的 JS 代码
                new UglifyJsPlugin()
            )
        }
    
        return {
            plugins: plugins,
            // 在生成环境不输出 Source Map
            devtool: isProduction ? undefined : 'source-map',
        };
    };

    在运行 Webpack 时,会给这个函数传入2个参数,分别是:

    1. env:当前运行时的 Webpack 专属环境变量,env 是一个 Object。读取时直接访问 Object 的属性,设置它需要在启动 Webpack 时带上参数。例如启动命令是 webpack --env.production --env.bao=foo 时,则 env 的值是 {"production":"true","bao":"foo"}
    2. argv:代表在启动 Webpack 时所有通过命令行传入的参数,例如 --config、--env、--devtool,可以通过 webpack -h 列出所有 Webpack 支持的命令行参数。

    就以上配置文件而言,在开发时执行命令 webpack 构建出方便调试的代码,在需要构建出发布到线上的代码时执行 webpack --env.production 构建出压缩的代码。

    导出一个返回 Promise 的函数

    在有些情况下你不能以同步的方式返回一个描述配置的 Object,Webpack 还支持导出一个返回 Promise 的函数,使用如下:

    module.exports = function(env = {}, argv) {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve({
            // ...
          })
        }, 5000)
      })
    }
    

    导出多份配置

    除了只导出一份配置外,Webpack 还支持导出一个数组,数组中可以包含每份配置,并且每份配置都会执行一遍构建。

    使用如下:

    module.exports = [
      // 采用 Object 描述的一份配置
      {
        // ...
      },
      // 采用函数描述的一份配置
      function() {
        return {
          // ...
        }
      },
      // 采用异步函数描述的一份配置
      function() {
        return Promise();
      }
    ]
    

    以上配置会导致 Webpack 针对这三份配置执行三次不同的构建。

    这特别适合于用 Webpack 构建一个要上传到 Npm 仓库的库,因为库中可能需要包含多种模块化格式的代码,例如 CommonJS、UMD。

    配置总结

    从前面的配置看来选项很多,Webpack 内置了很多功能。

    你不必都记住它们,只需要大概明白 Webpack 原理和核心概念去判断选项大致属于哪个大模块下,再去查详细的使用文档。

    通常你可用如下经验去判断如何配置 Webpack:

    • 想让源文件加入到构建流程中去被 Webpack 控制,配置 entry
    • 想自定义输出文件的位置和名称,配置 output
    • 想自定义寻找依赖模块时的策略,配置 resolve
    • 想自定义解析和转换文件的策略,配置 module,通常是配置 module.rules 里的 Loader。
    • 其它的大部分需求可能要通过 Plugin 去实现,配置 plugin
    展开全文
  • Webpack 配置

    2019-11-04 15:13:01
    Webpack篇 开始着手项目打包的一些东西,还不是特别懂,一边学习,一边做笔记好啦。 1.webpack的概念。 Webpack 是当下最热门的前端资源模块化管理和打包工具。任何形式的资源都可以视作模块,通过 loader 的转换。 ...

    Webpack篇

    开始着手项目打包的一些东西,还不是特别懂,一边学习,一边做笔记好啦。

    1.webpack的概念。
    Webpack 是当下最热门的前端资源模块化管理和打包工具。任何形式的资源都可以视作模块,通过 loader 的转换。
    2.webpack的安装。
    (1)在Node.js 用npm 全局安装Webpack: npm install webpack -g
    通过webpack -h 测试。

    (2)进入项目目录。通过npm init创建 package.json。安装webpack依赖 npm install webpack --save-dev。
    使用命令webpack + xx(需要打包的js名称) + xx(打包后的js名称)。使用动态表达式require绑定js文件,加载依赖。

    (3)打包css ,首先需要先安装loader : npm install css-loader style-loader --save-dev
    1.特别注意如果引用css的时候,打包需要在路径中添加css-loader!,在运用到页面中需要添加style-loader!。
    2.使用webpack entry.js bundle.js --module-bind 'css=style-loader!css-loader’语句就不需要在路径中引用那些loader了,在后面添加–watch进入监视者模式,–progress 可以看到打包过程,–display-modules 列出打包的模块,–display-reasons 列出打包的原因。

    3.webpack的配置文件。
    (1)简历项目webpack来配置文件。首先创建目录。

    src里面还分别创建script、style文件。来放置js文件跟css文件。
    dist 存放打包好的js文件。
    (2)系统会默认搜索webpack.config.js这个配置文件, 或者使用 webpack --config +xx(配置文件名)来指定配置文件。
    //模块化输出
    module.exports = {
    //打包入口
    entry: ‘./src/script/main.js’,
    output: {
    //打包文件放在哪里
    path: ‘./dist/js’,
    //打包文件名
    filename: ‘bundle.js’
    }
    }
    在有配置文件的状态下,只需要运行 webpack就能编译打包。
    (3)如果需要加特别的参数来输出,需要在package.json文件里面配置。
    “scripts”: {
    “test”: “echo “Error: no test specified” && exit 1”,
    //可以在这里添加你想要输出的命令。
    “webpack”: “webpack --config webpack.config.js --progress --display-modules --colors --display-reasons”
    },
    使用 npm run webpack 编译。

    (4)配置参数的详解
    1.entry 表示入口文件的路径。它有三种写法针对不同的情况。
    1.只写一个单一的路径:entry: ‘./路径/.xxx.js’’
    2.写一个数组: entry:【‘./路径/.xxx.js’,‘./路径/.xxx.js’’】(这个也只打包了一个文件)
    3.可以写 一个对象key 加 value的形式:注意这种写法需要修改 output.filename值才有效果。
    entry: {
    page1: ‘./page1’,
    page2: [’./page2’,’./page3’]
    }
    2.output.filename 这里不要写绝对路径且不要写路径,只需要写文件名。
    (1)如果entry入口文件有第三种情况的写法,需要更改filename的文件名。
    (2)name 输出跟入口文件同样的文件名。
    (3)hash 就是本次编译打包的hash值。(两个hash值是一样的)
    (4)chunkhash 是系统的hash值,也可以理解为版本号,只有当文件修改了再打包的文件才会更新这个值。

    3.插件。(更新html,因为每次打包好的js文件名是不一定的,所以html引用的js的名字不确定,所以需要插件来解决这个问题。)
    1.先案例一个插件推荐网站。插件推荐(随便百度的)(1)先使用命令安装插件 npm install html-webpack-plugin --save-dev.
    (2)在配置文件中引用:var htmlWebpackPlugin = require(‘html-webpack-plugin’)。
    (3)在配置文件中添加一个属性:
    plugins: [
    new htmlWebpackPlugin({
    //如果不加参数只是生成一个新的html文件。
    //设置模版
    template: ‘index.html’,
    //更改html的名字,跟更改打包文件名相同。
    filename: ‘index-[hash].html’,
    //还可以制定生成的脚本放在那个地方
    inject: ‘head’
    })
    ]
    context:上下文选项用来决定根目录(既绝对路径)的入口文件。

    (4)更复杂的功能。把plugins里添加的属性显示到html文件中。
    在html文件中写类似js模版语言,需要用<%= %>的格式包裹起来。如果是编写js代码的话就不需要中间的= 号。
    搜索到一个每一个属性详细的配置,需要的可以过来看看html-webpack-plugin 1.既然能用代码的形式拿到数据,知道了结构,那么换一种方式就可以用模版语言的方式引用js文件。
    在html标签里面要用 <%= htmlWebpackPlugin.options.xx(这里写属性) %> 另外,需要打印属性跟值的时候加上JSON.stringify解析成字符串。
    2.在output.publicPath:这里可以写上线的地址前缀。
    3.多应用的页面处理。
    (1)在entry添加多个入口文件。
    (2)新建相同个数的new htmlWebpackPlugin,设置不同的文件。
    (3)为了解决生成的html载入对应的js文件,可以使用两种方法:
    1.使用chunks浏览器传参的方式:chunks:【‘a’】。
    2.使用excludeChunks排除串口的方式:excludeChunks:【‘b’,‘c’】。
    (4)减少http请求,把js初始化代码直接写到页面中。
    1.htmlWebpackPlugin.files.chunks.main.entry.substr(htmlWebpackPlugin.files.publicPath.length)获取的值没有publicPath值。
    2.拿到这个值之后使用webpack官方给的api compilation.assets[包裹获取的值].source() 这样就获取的不是地址,而是js内容了。
    3.使用模版语言判断引用js。
    4.特别注意inject是开启是否自动生成

    (5)loader。
    1.loader 的三种配置方式。
    1.loader in require 直接 在require文件的时候在路径中添加对应的loader。
    2.CLI 在编译的的语法中添加 --module-bind + 对应的loader。
    3.Configuraion 在配置文件中添加一个数组,添加对于的loader。
    2.Configuraion 配置步骤。
    1.先在Babel安装好babel-loader。npm install --save-dev babel-loader babel-core
    2.配置presets属性,转换为Latest(包含es2015、2016、2017),安装Latest插件。
    //配置loader
    module: {
    loaders: [
    {
    //匹配以js结尾的文件
    test: /.js$/,
    //使用babel-loader
    loader: ‘babel’,
    //为了解决加载速度的问题,可以排除不要扫描的文件夹
    exclude: ‘./node_modules’,
    //有时候排除了也无法解决问题,那就只能指定文件夹
    include: ‘./src/’,
    //如果上面的两个方法也没效果,使用node的方法指定绝对路径。
    //1.引用node的api ,var path = require(‘path’);
    //2.exclude: path.resolve(__dirname , ‘node_modules’),include: path.resolve(__dirname , ‘src’),
    //用query参数指定插件解析js。
    query: {
    //解析js的特效 安装latest npm install --save-dev babel-preset-latest
    presets: [‘latest’]
    }
    }
    ]
    },
    3.使用配置文件loader css。
    *npm 官网 npm(1)打包自动对css做处理,安装postcss-loader后处理器 npm install postcss-loader --save-dev
    npm install autoprefixer --save-dev 添加css浏览器前缀。
    (2)直接添加新的对象,配置。如果有css文件中import其他css,修改成css-loader?importLoaders=1就好了。
    (3)安装less npm i less 安装less-loader npm i less-loader --save-dev sass同理,如果有import文件,不需要做处理。

    4.使用配置文件loader 模版文件。
    (1)不管是哪种模版先要下载对应的loader:npm install html-loader --save-dev。
    (2)在配置文件loaders中做对应的设置。
    (3)ejs 跟tpl格式是相同的。

    5.图片的配置。
    (1)安装file-loader打包图片,不管是css还是原HTML都会打包成功,注意如果是模版打包绝对路径没有问题,相对路径需要处理
    (2)安装url-loader。
    {
    test: /.(jpg|png|gif)KaTeX parse error: Expected 'EOF', got '}' at position 242: …ext]' } }̲ (3)压缩图片image-w…/i,
    loaders: [
    //简写,可以把写成一个请求的方式。
    ‘url-loader?limit=2000&name=assets/[name]-[hash:5].[ext]’,
    ‘image-webpack-loader’
    ]
    }
    还有很多其他图片的配置,详情见npm官网。

    展开全文
  • webpack 配置

    2019-04-29 14:47:28
    参考地址:... 01: 配置选项 Config options: --config 配置文件路径,字符串格式,默认是`根目录`下的 webpack.config.js 或 webpackfile.js, --config-name 使用配置的名字,字符串 -...

    参考地址:https://segmentfault.com/a/1190000012536871#articleHeader1

    01: 配置选项 Config options:
      --config       配置文件路径,字符串格式,默认是`根目录`下的 webpack.config.js 或 webpackfile.js,
      --config-name  使用配置的名字,字符串
      --env          当配置文件输出的是一个函数时,要指定,在下一节课中会介绍
    
    02: 基本选项 Basic options:
      --context    入口文件根目录,默认为当前目录
      --entry      入口文件,这里只能是字符串,但在配置文件中还可以定义数组或对象
      --watch, -w  监视是否有文件有改动,会自动打包,默认为false
      --debug      Switch loaders to debug mode                            [boolean]
      --devtool    Enable devtool for better debugging experience (Example:
                   --devtool eval-cheap-module-source-map)                  [string]
      -d           shortcut for --debug --devtool eval-cheap-module-source-map
                   --output-pathinfo                                       [boolean]
      -p           shortcut for --optimize-minimize --define
                   process.env.NODE_ENV="production"                       [boolean]
      --progress   Print compilation progress in percentage                [boolean]
    
    03: 模块选项 Module options:
      --module-bind       Bind an extension to a loader                     [string]
      --module-bind-post                                                    [string]
      --module-bind-pre                                                     [string]
    
    04: 输出选项 Output options:
      --output-path                 The output path for compilation assets
                                           [string] [default: The current directory]
      --output-filename             The output filename of the bundle
                                                       [string] [default: [name].js]
      --output-chunk-filename       The output filename for additional chunks
           [string] [default: filename with [id] instead of [name] or [id] prefixed]
      --output-source-map-filename  The output filename for the SourceMap   [string]
      --output-public-path          The public path for the assets          [string]
      --output-jsonp-function       The name of the jsonp function used for chunk
                                    loading                                 [string]
      --output-pathinfo             Include a comment with the request for every
                                    dependency (require, import, etc.)     [boolean]
      --output-library              Expose the exports of the entry point as library
                                                                            [string]
      --output-library-target       The type for exposing the exports of the entry
                                    point as library                        [string]
    
    05: 高级选项 Advanced options:
      --records-input-path       Path to the records file (reading)         [string]
      --records-output-path      Path to the records file (writing)         [string]
      --records-path             Path to the records file                   [string]
      --define                   Define any free var in the bundle          [string]
      --target                   The targeted execution environment         [string]
      --cache                    Enable in memory caching
                          [boolean] [default: It's enabled by default when watching]
      --watch-stdin, --stdin     Exit the process when stdin is closed     [boolean]
      --watch-aggregate-timeout  Timeout for gathering changes while watching
      --watch-poll               The polling interval for watching (also enable
                                 polling)                                   [string]
      --hot                      Enables Hot Module Replacement            [boolean]
      --prefetch                 Prefetch this request (Example: --prefetch
                                 ./file.js)                                 [string]
      --provide                  Provide these modules as free vars in all modules
                                 (Example: --provide jQuery=jquery)         [string]
      --labeled-modules          Enables labeled modules                   [boolean]
      --plugin                   Load this plugin                           [string]
      --bail                     Abort the compilation on first error
                                                           [boolean] [default: null]
      --profile                  Profile the compilation and include information in
                                 stats                     [boolean] [default: null]
    
    06: 解析选项 Resolving options:
      --resolve-alias         Setup a module alias for resolving (Example:
                              jquery-plugin=jquery.plugin)                  [string]
      --resolve-extensions    Setup extensions that should be used to resolve
                              modules (Example: --resolve-extensions .es6,.js)
                                                                             [array]
      --resolve-loader-alias  Setup a loader alias for resolving            [string]
    
    07: 优化选项 Optimizing options:
      --optimize-max-chunks      Try to keep the chunk count below a limit
      --optimize-min-chunk-size  Try to keep the chunk size above a limit
      --optimize-minimize        Minimize javascript and switches loaders to
                                 minimizing                                [boolean]
    
    08: 统计选项 Stats options:
      --color, --colors               Enables/Disables colors on the console
                                               [boolean] [default: (supports-color)]
      --sort-modules-by               Sorts the modules list by property in module
                                                                            [string]
      --sort-chunks-by                Sorts the chunks list by property in chunk
                                                                            [string]
      --sort-assets-by                Sorts the assets list by property in asset
                                                                            [string]
      --hide-modules                  Hides info about modules             [boolean]
      --display-exclude               Exclude modules in the output         [string]
      --display-modules               Display even excluded modules in the output
                                                                           [boolean]
      --display-max-modules           Sets the maximum number of visible modules in
                                      output                                [number]
      --display-chunks                Display chunks in the output         [boolean]
      --display-entrypoints           Display entry points in the output   [boolean]
      --display-origins               Display origins of chunks in the output
                                                                           [boolean]
      --display-cached                Display also cached modules in the output
                                                                           [boolean]
      --display-cached-assets         Display also cached assets in the output
                                                                           [boolean]
      --display-reasons               Display reasons about module inclusion in the
                                      output                               [boolean]
      --display-depth                 Display distance from entry point for each
                                      module                               [boolean]
      --display-used-exports          Display information about used exports in
                                      modules (Tree Shaking)               [boolean]
      --display-provided-exports      Display information about exports provided
                                      from modules                         [boolean]
      --display-optimization-bailout  Display information about why optimization
                                      bailed out for modules               [boolean]
      --display-error-details         Display details about errors         [boolean]
      --display                       Select display preset (verbose, detailed,
                                      normal, minimal, errors-only, none)   [string]
      --verbose                       Show more details                    [boolean]
    
    09: 选项 Options:
      --help, -h     显示帮助信息                                            
      --version, -v  版本号                                  
      --json, -j     将结果以JSON格式显示 

     

    展开全文
  • 参考 webpack教程、create-react-app(eject后)配置,自定义一个适合的、可维护的webpack配置 1.初始化 yarn init 初始化成功 yarn init v1.17.3 question name (my-webpack-config): question version (1.0.0):...

    参考 webpack教程、create-react-app(eject后)配置,自定义一个适合的、可维护的webpack配置

    1.初始化

    yarn init
    

    初始化成功

    yarn init v1.17.3
    question name (my-webpack-config): 
    question version (1.0.0): 
    question description: 
    question entry point (index.js): 
    question repository url (https://github.com/1071942338/my-webpack-config.git): 
    question author (张文旗 <1071942338@qq.com>): 
    question license (MIT): 
    question private: 
    success Saved package.json
    ✨  Done in 10.97s.
    

    2.安装 webpack webpack-cli

    yarn add webpack webpack-cli -D
    

    3. package.json 添加 build 脚本

    3.1 添加 index.js 文件

    1. 新建 src 文件夹
    2. 新建 index.js 文件
    console.log("Hello Webpack !");
    
    

    3.2 添加 webpack.config.js 文件

    1. 新建 config 文件夹
    2. 新建 webpack.config.js 文件
    module.exports = {
      //指定入口文件
      entry: "./src/index.js",
      output: {
        //输出文件名称
        filename: "main.js",
      },
      //暂时指定开发模式
      mode: "development",
    };
    
    

    3.3 package.json 添加 scripts:build

      "scripts": {
        "build": "webpack --config ./config/webpack.config.js"
      },
    

    3.4 执行构建脚本

    yarn build
    
    yarn run v1.17.3
    $ webpack --config ./config/webpack.config.js
    Hash: 33226b34c0395d779dc7
    Version: webpack 4.44.1
    Time: 47ms
    Built at: 2020/08/10 下午2:31:51
      Asset     Size  Chunks             Chunk Names
    main.js  3.8 KiB    main  [emitted]  main
    Entrypoint main = main.js
    [./src/index.js] 32 bytes {main} [built]
    ✨  Done in 0.60s.
    

    3.5 执行结果

    1. 生成 dist 文件夹
    2. dist 目录下生成 main.js 文件
    3. dist 目录添加 index.html 文件并使用 main.js ,可在控制台看到打印内容:Hello Webpack !

    4. 拆分 webpack.config.js

    4.1 拆分目的

    • 开发和生产环境需求不同,例如开发需要热更新及时查看代码效果,生成需要压缩代码
    • 便于维护

    4.2 拆分结果

    • webpack.base.js 公共配置
    • webpack.dev.js 开发开发配置
    • webpack.prod.js 生成环境配置

    4.3 拆分工具

    需要用到webpack-merge

    yarn add webpack-merge -D
    

    4.3 然后修改文件内容

    <!-- webpack.base.js -->
    module.exports = {
      //指定入口文件
      entry: "./src/index.js",
      output: {
        //输出文件名称
        filename: "main.js",
      },
    };
    
    <!-- webpack.dev.js -->
    const { merge } = require("webpack-merge");
    const baseConfig = require("./webpack.base");
    module.exports = merge(baseConfig, {
      mode: "development",
    });
    
    <!-- webpack.prod.js -->
    const { merge } = require("webpack-merge");
    const baseConfig = require("./webpack.base");
    module.exports = merge(baseConfig, {
      mode: "production",
    });
    

    4.3 修改 package.json 文件内容

      "scripts": {
        "dev": "webpack --config ./config/webpack.dev.js",
        "build": "webpack --config ./config/webpack.prod.js"
      },
    

    4.4 分别执行指令

    yarn dev
    <!-- 或 -->
    yarn build
    

    都可以生成dist/main.js文件,区别就是dev为 develpotment 模式代码未压缩。

    5. 使用 html 模板

    yarn add html-webpack-plugin -D
    

    5.1 添加 index.html 文件

    1. 新建 public 文件夹
    2. 新建 index.html 文件
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <title>my-webpack-config</title>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
      </head>
      <body></body>
    </html>
    
    

    5.2 修改 webpack.base.js 文件

    const pathsUtil = require("./pathsUtil");
    const HtmlWebpackPlugin = require("html-webpack-plugin");
    
    module.exports = {
      //指定入口文件
      entry: pathsUtil.appIndexJs,
      output: {
        //输出文件名称
        filename: "main.js",
      },
      plugins: [
        new HtmlWebpackPlugin({
          template: pathsUtil.appHtml,
          inject: true,
        }),
      ],
    };
    
    
    

    5.3 然后执行构建命令即可看到自动生成的index.html文件

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <title>my-webpack-config</title>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
      </head>
      <body><script src="main.js"></script></body>
    </html>
    
    

    6.添加 CSS 支持

    yarn add style-loader css-loader -D
    

    6.1 添加index.css文件

    .color {
      color: rebeccapurple;
    }
    

    6.2 修改index.js文件

    import "./index.css";
    
    const colorElement = document.createElement("div");
    colorElement.setAttribute("class", "color");
    colorElement.innerText = "my-webpack-config";
    document.body.appendChild(colorElement);
    

    6.3 修改 webpack.base.js 文件

    const pathsUtil = require("./pathsUtil");
    const HtmlWebpackPlugin = require("html-webpack-plugin");
    
    module.exports = {
      //指定入口文件
      entry: pathsUtil.appIndexJs,
      output: {
        //输出文件名称
        filename: "main.js",
      },
      module: {
        rules: [
          {
            test: /\.css$/,
            use: ["style-loader", "css-loader"],
          },
        ],
      },
      plugins: [
        new HtmlWebpackPlugin({
          template: pathsUtil.appHtml,
          inject: true,
        }),
      ],
    };
    
    

    7.添加图片支持

    yarn add url-loader file-loader -D
    

    7.1 添加尺寸不同的图片

    • small 47K
    • big 4.4M

    7.2 修改 webpack.base.js 文件

    const pathsUtil = require("./pathsUtil");
    const HtmlWebpackPlugin = require("html-webpack-plugin");
    
    module.exports = {
      //指定入口文件
      entry: pathsUtil.appIndexJs,
      output: {
        //输出文件名称
        filename: "main.js",
      },
      module: {
        rules: [
          {
            test: /\.css$/,
            use: ["style-loader", "css-loader"],
          },
          {
            test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
            use: [
              {
                loader: "url-loader",
                options: {
                  limit: 51200,//50k
                },
              },
            ],
          },
        ],
      },
      plugins: [
        new HtmlWebpackPlugin({
          template: pathsUtil.appHtml,
          inject: true,
        }),
      ],
    };
    
    

    7.3 修改 index.js 文件

    import "./index.css";
    import smallImage from "./image/small.png";
    import bigImage from "./image/big.png";
    
    const colorElement = document.createElement("div");
    colorElement.setAttribute("class", "color");
    colorElement.innerText = "my-webpack-config";
    document.body.appendChild(colorElement);
    
    const smallImageElement = document.createElement("img");
    smallImageElement.setAttribute("src", smallImage);
    document.body.appendChild(smallImageElement);
    
    const bigImageElement = document.createElement("img");
    bigImageElement.setAttribute("src", bigImage);
    document.body.appendChild(bigImageElement);
    
    

    7.4 执行构建打包后在浏览器中查看

    • small 以 base64字符串显示
    • big 4.4M 以路径加载图片显示

    8.添加字体解析

    yarn add file-loader -D
    

    8.1 修改 index.css

    .color {
      color: rebeccapurple;
    }
    @font-face {
      font-family: myFirstFont;
      src: url("./font/font.ttf");
    }
    .font {
      font-family: myFirstFont;
    }
    
    

    8.2 修改 index.js

    import "./index.css";
    import smallImage from "./image/small.png";
    import bigImage from "./image/big.png";
    
    const colorElement = document.createElement("div");
    colorElement.setAttribute("class", "color");
    colorElement.innerText = "my-webpack-config";
    document.body.appendChild(colorElement);
    
    const fontElement = document.createElement("div");
    fontElement.setAttribute("class", "color font");
    fontElement.innerText = "my-webpack-config";
    document.body.appendChild(fontElement);
    
    const smallImageElement = document.createElement("img");
    smallImageElement.setAttribute("src", smallImage);
    document.body.appendChild(smallImageElement);
    
    const bigImageElement = document.createElement("img");
    bigImageElement.setAttribute("src", bigImage);
    document.body.appendChild(bigImageElement);
    
    

    8.3 修改 webpack.base.js

    const pathsUtil = require("./pathsUtil");
    const HtmlWebpackPlugin = require("html-webpack-plugin");
    
    module.exports = {
      //指定入口文件
      entry: pathsUtil.appIndexJs,
      output: {
        //输出文件名称
        filename: "main.js",
      },
      module: {
        rules: [
          {
            test: /\.css$/,
            use: ["style-loader", "css-loader"],
          },
          {
            test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
            use: [
              {
                loader: "url-loader",
                options: {
                  limit: 51200, //50k
                },
              },
            ],
          },
          {
            test: /\.(woff|woff2|eot|ttf|otf)$/,
            use: ["file-loader"],
          },
        ],
      },
      plugins: [
        new HtmlWebpackPlugin({
          template: pathsUtil.appHtml,
          inject: true,
        }),
      ],
    };
    
    

    8.4 构建打包 查看效果

    9. 添加 React 支持

    9.1 添加 babel 支持

    yarn add @babel/core @babel/preset-env @babel/preset-react -D
    

    9.2 添加 babel-loader 支持

    yarn add babel-loader -D
    

    9.3 添加 React 支持

    yarn add react react-dom 
    

    9.4 修改 webpack.base.js

    yarn add react react-dom 
    

    9.5 修改 index.html

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <title>my-webpack-config</title>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
      </head>
      <body>
        <div id="root"></div>
      </body>
    </html>
    
    
    

    9.6 修改 index.js

    import React from "react";
    import ReactDom from "react-dom";
    import "./index.css";
    import App from "./App.jsx";
    
    ReactDom.render(<App />, document.getElementById("root"));
    
    

    9.7 新增 App.jsx

    import React from "react";
    import smallImage from "./image/small.png";
    import bigImage from "./image/big.png";
    export default class App extends React.Component {
      render() {
        return (
          <div>
            <div className="color">my-webpack-config</div>
            <div className="color font">my-webpack-config</div>
            <img src={smallImage} alt=""></img>
            <img src={bigImage} alt=""></img>
          </div>
        );
      }
    }
    
    

    9.9 执行构建脚本,查看效果

    10. 自动编译代码

    yarn add webpack-dev-server -D
    
    

    10.1 添加 scripts 文件夹

    • 新增 dev.js
    • 新增 build.js

    10.2 编辑 dev.js

    "use strict";
    const webpack = require("webpack");
    const prodConfig = require("../config/webpack.dev.js");
    const webpackDevServer = require("webpack-dev-server");
    
    const compiler = webpack(prodConfig);
    const devServerOptions = Object.assign({}, prodConfig.devServer, {
      open: true,
      stats: {
        colors: true,
      },
    });
    const server = new webpackDevServer(compiler, devServerOptions);
    
    server.listen(3000, "127.0.0.1", () => {
      console.log("Starting server on http://localhost:3000");
    });
    
    

    10.3 编辑 build.js

    "use strict";
    const webpack = require("webpack");
    const prodConfig = require("../config/webpack.prod.js");
    webpack(prodConfig, (err, stats) => {
      if (err || stats.hasErrors()) {
        // 在这里处理错误
        console.log("err:", err);
        console.log("stats:", stats);
      }
      // 处理完成
      console.log("处理完成");
    });
    
    

    10.4 编辑 package.json 文件

      "scripts": {
        "dev": "node ./scripts/dev.js",
        "build": "node ./scripts/build.js"
      },
    

    10.5 执行构建脚本,查看效果

    yarn dev
    

    然后自动打开 http://localhost:3000 页面,编辑页面保存后,页面自动刷新


    代码仓库

    参考链接

    展开全文
  • 【Webpack】Webpack配置

    2020-05-31 13:01:36
    webpack 安装 安装Node.js 在Git或者cmd中输入下面这段代码, 通过全局先将webpack指令安装进电脑中 npm install webpack -g 使用Git Bash here 或者 cmd cd命令使当前目录转到当前项目的目录下, 然后输入下面...
  • webpack配置使用

    2019-07-04 10:55:56
    Step2:在Git或者cmd中输入下面这段代码, 通过全局先将webpack指令安装进电脑中npm install webpack -g Step3:使用Git Bash here 或者 cmd cd命令使当前目录转到当前项目的目录下, 然后输入下面这段命令 ...
  • vue webpack配置分析

    2017-11-17 16:18:00
    写在前面:作为 Vue 的使用者我们对于 vue-cli 都很熟悉,但是对它的 webpack 配置我们可能关注甚少,今天我们为大家带来 vue-cli#2.0 的 webpack 配置分析 vue-cli 的简介、安装我们不在这里赘述,对它还不熟悉的...
  • webpack配置详解

    2021-03-23 11:41:16
    webpack配置详解 const path = require('path'); module.exports = { // entry 表示 入口,Webpack 执行构建的第一步将从 Entry 开始,可抽象成输入。 // 类型可以是 string | object | array entry: './app/entry',...
  • Webpack配置详解(package.json/webpack.config.js详细配置 ) webpack安装 package.json配置以及模块安装 webpack.config.js配置 开启webpack-dev-server服务 热替换插件的安装以及配置 开启自动打开浏览器插件的...
  • 1.安装之前步骤新建好项目文件,新增加dist 文件夹用来...2.新建一个webpack.config.js文件用来写webpack配置文件。 配置代码: //webpack 1.0 语法 /*module.exports = { entry:'./src/script/main.js', ou...
  • Webpack 配置示例

    2017-02-05 21:44:00
    Webpack 作为前端构建工具,对于大型网站开发,大大提升了开发效率。要使用webpack需要先安装webpack...通常,都不会这样直接使用使用,而是在项目根目录下进行打包配置配置文件默认为webpack.config.js。 /...
  • webpack 配置总结

    千次阅读 2016-12-11 09:47:10
    entry入口文件配置配置entry入口配置有三种写法,每一个入口称为chunk。 字符串: entry: ‘./index/index.js’: 配置模块会被解析为模块,并在启动时加载。chunk名默认为mian,具体打包文件名视output配置而定...
  • webpack 配置详解

    2017-11-17 08:34:28
    最近在学习webpack,边学边练习,下面是对一些应用到的属性、插件记录分享出来,也方便以后查找与复习,过程中碰到了一些坑,在注释中有说明: const path = require('path') const webpack = require("webpack") ...
  • webpack配置命令

    2016-11-28 11:31:00
    从2015年开始,webpack就是当前最火的构建工具。跟着时代向前走。准没错。我们要追随大神的脚步。走在前端技术栈的前列...3.在cmd窗口输入path查看否已配置环境变量,高版本默认好像已配置。反正我重装系统重新安装...
  • webpack配置解析

    2018-03-09 16:29:00
    从深入浅出webpack转载 const path = require('path'); module.exports = { // entry 表示 入口,Webpack 执行构建的第一步将从 Entry 开始,可抽象成输入。 // 类型可以是 string | object | array entry: './...
  • webpack配置entry和output

    2018-03-29 10:16:26
    配置webpack.config.js,可以直接通过命令行工具来设置。 1.可以在package.json文件的的scripts下添加对应的参数,然后配合npm的命令行则可以实现webpack的一些相关命令。 2.然后运行npm run webpack。 { &...
  • 看到一篇写webpack配置文件解释的文章,感觉很好,分享给大家。 原文地址:https://segmentfault.com/a/1190000014804826 一、前言 vue-cli是构建vue单页应用的脚手架,输入一串指定的命令行从而自动生成vue.js+...
  • webpack配置技巧

    2018-02-06 20:01:30
    对于构建工具,相信大家并不陌生,熟悉webpack的人都知道,webpack配置项非常庞大,有时想要找一个配置项就要花半天时间,所以有一部分人把目标投向了去年在构建工具类中排行冠军的零配置的parcel。 作为webpack...
  • 使用webpack配置es6开发环境 首先搭建一个es6的开发环境,见链接: link. 全局安装webpack npm install -g webpack 安装依赖 babel-core、babel-loader、babel-preset-es2015、html-webpack-plugin、webpack、webpack...
  • webpack-configwebpack配置详细设置说明/** * CLI "dev": "webpack-dev-server --hot --inline --progress --color --proflie --display-error-details", "publish-mac": "export NODE_ENV=prod&&webpack -p --...
  • vue-cli webpack配置分析

    2017-11-23 10:03:53
    很自然,我就想到了vue-cli脚手架了,当时研究一下它的webpack配置。于是,就有了其他的内容。 今天这篇文章,是在原来的基础上,增加了一些新版本的内容,但实质上变化不大。 说明 此仓库为vue-cli

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 3,038
精华内容 1,215
关键字:

colorswebpack配置