node学问

path.resolve

path.resolve(from[…pathname], to)将参数to位置的字符剖析到一个绝对途径里。
__dirname 当前文件目次绝对途径
__filename 当前文件全途径
demo示例:(当前目次: D:\www\programs\react-prod\config)

// 相对途径依据当前位置绝对途径剖析
// ../婚配上一层
// ./ 或许 没有./婚配当前途径
// D:\www\programs\react-prod\config\dist
path.resolve('./dist')
// D:\www\programs\react-prod\dist
path.resolve('../dist')
// D:\www\programs\react-prod\config\www\dist
path.resolve('www/demo', '../dist')
// D:\dist绝对途径直接返回
path.resolve('/dist')

// 假如只通报一个参数，那末相对途径将基于当前敕令的实行途径
输出

console.log(path.resolve('./dist'))
console.log(path.resolve(__dirname, './dist'))

当在D:\www\programs\react-prod途径下实行时，离别返回

D:\www\programs\react-prod\dist
D:\www\programs\react-prod\script\dist

当在D:\www\programs\react-prod\script途径下实行时，离别返回

D:\\www\\programs\\react-prod\\script\\dist
D:\\www\\programs\\react-prod\\script\\dist

所以为了表现一致，path内里剖析绝对途径，须要加上__dirname

webpack学问

context
设置基本目次，使config中的相对途径基于这个目次,如许，不论webpack设置文件放在那里，我们在文件内部援用外部文件时，都能够依据一个雷同的基本目次剖析文件，只需修正config.context一个处所就能够了。

entry进口

用法：

1. 单进口: entry: string|Array<string>,传入数组会将数组中的文件作为一致一个进口一同打包成一个文件
2. 多进口: 用法：entry: {[entryChunkName: string]: string|Array<string>}依据进口打包成多个js文件

output输出

在 webpack 中设置 output 属性的最低要求是，将它的值设置为一个对象，包括以下两点：

1. filename 用于输出文件的文件名。
2. 目的输出目次 path 的绝对途径。

经常运用loaders

1.css-loader

css加载器 css-loader, style-loader
css-loader 诠释(interpret) @import 和 url() ，会 import/require() 后再剖析(resolve)它们
style-loader用来将剖析出来的css内容增加到页面的style标签内里。然则平常情况下我们都会将css款式与js文件星散，如许能够有效减小代码体积。2.66kb -> 816bytes+27bytes
css-loader+style-loader平常须要连系两个plugin一同运用，离别用于将css星散和紧缩

// 用于提取css的plugin
const ExtractTextPlugin = require('extract-text-webpack-plugin')
// 用于紧缩css的plugin
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin')
...
// module.rules[num]
{
    test: /\.css$/,
    // 它会将一切的进口chunk(entry chunks)中援用的 *.css，
    // 移动到自力星散的 CSS 文件
    // css bundle 与 js bundle 并行加载,加快页面初始化
    use: ExtractTextPlugin.extract({
      fallback: 'style-loader',
      use: 'css-loader'
    })
    // style-loader用来将css-loader剖析(import,url()等)出来的css
    // 插进去到页面的<style>标签内里，没有则没法一般援用
    // 运用etp时则作为降级处置惩罚
    // use: ['style-loader', 'css-loader']
}
...
plugins: [
    // name为进口内里的名字，将抽离的css兼并成文件
    // 对每一个进口chunk都天生一个对应的文件
    // 所以当你设置多个进口 chunk 的时刻
    // 必需运用[name],[id]或[contenthash]
    new ExtractTextPlugin('css/[name].css'),
    // 紧缩css
    new OptimizeCssAssetsPlugin({
      // 婚配须要紧缩的文件
      assetNameRegExp: /\.css$/g,
      // 紧缩运用的插件
      cssProcessor: require('cssnano'),
      cssProcessorOptions: { discardComments: {removeAll: true } },
      canPrint: true
    })
]

2.file-loader
file-loader用来剖析资本文件，能够自定义剖析天生的文件名，途径等等，用来处置惩罚css中的background-image以及js中import一个img等援用资本的情形。
file-loader存在一个很大的坑就是，我们每每须要运用相对途径去剖析打包文件中设想的图片资本，而且将打包天生的css，images离别放在差别的目次，比方我们划定剖析天生的img的途径名称为：assets/images/demo.png,那末不论是在css照样在js的img援用中，援用途径都会是’assets/images/demo.png’,在html中，因为自身目次构造与asset平级，能够顺遂援用，然则在css中就不可了，援用途径就会变成dist/assets/css/assets/image/demo.png。emmm，自然是不可的。在网上找了一大圈，满是什么杂乱无章的，要么驴唇不对马嘴，要么自娱自乐，要么强行装逼…真是无力吐槽。真正有效的信息老是被渣滓信息掩饰，不过费了九牛二虎之力，照样找到了卓有成效的解决办法，传送门。这里利用了extract-text-webpack-plugin的publicPath属性，这个属性的作用是，从新设置loader剖析出来的文件的publicPath。作用就是，比方你在css内里原本的援用途径是’assets/images/demo.png’,经由过程设置publicPath，援用途径就变成了’../../assets/images/demo.png’。依据本例的途径，(返回到assets层，再返回到dist层)终究剖析的途径就是’dist/assets/images/demo.png’。ok，至此，import、url()的途径都是一般的啦。网上有一种解决方案是运用绝对途径，额，大胸弟，我以为这个很不妥吧，你能保证你的目次表面没有嵌套个几层？比方给咱的运用套个apapa的壳？(emmmm.很过火，迎接斧正) 能够连系图片紧缩plugin，比方紧缩天生的雪碧图。

{
    test: /\.(png|svg|jpe?g|gif)$/i,
    use: {
      loader: 'file-loader',
      options: {
        name: 'assets/images/[name].[ext]'
      }
    }
}

// css-loader做以下修正
{
    test: /\.css$/,
    // 它会将一切的进口 chunk(entry chunks)中援用的 *.css，
    // 移动到自力星散的 CSS 文件
    // css bundle 与 js bundle 并行加载
    use: ExtractTextPlugin.extract({
      fallback: 'style-loader',
      // 定义文件内部援用的途径
      // 原途径加上../../(基于assets/images/)
      // 用来处置惩罚url文件援用
+     publicPath: '../../',
      use: 'css-loader'
    })
}

3.babel-loader
babel-loader的作用是在webpack内里运用babel。emmm….
用法以下

{
    test: /\.(js|jsx)$/,
    exclude: /node_modules/,
    use: {
      // 依靠babel-loader,babel-core
      // 等价于
      // loader: 'babel-loader?presets=env&compact=false',
      loader: 'babel-loader',
      options: {
        // 将es6的语法转换成es5
        presets: [
          ["env", {

            // 假如兼容性要求不高，能够增加target属性
            // 削减polyfill的代码量，而且直接运用es6新特征
            "targets": {
              "browsers": ["last 2 versions", "safari >= 7"]
            },
            // 交由 Webpack 来处置惩罚模块化(决议运用import/require)
            // 经由过程其 TreeShaking 特征将有效削减打包出来的JS文件大小867bytes->817bytes
            "modules": false
          }]
        ],
        // babel-plugin-transform-runtime
        // babel-runtime
        // 防止模块的反复援用,polyfills功用,修复es6高等语法不兼容题目
        // 与babel-polyfill的区分在于runtime会按需加载，不会污染全局
        plugins: ['transform-runtime'],
        // 缓存编译效果
        cacheDirectory: true,
        // 去掉过剩的空行与换行符
        compact: true
      }
    }
}

4.ts-loader
运用ts开辟时，须要运用ts-loader举行type check，然则ts-loader在实行检测的过程当中，是单线程实行，这会形成编译时候巨长非常。在这里运用awesome-typescript-loader替换

{
    test: /\.tsx?$/,
    use: {
      loader: 'awesome-typescript-loader',
      options: {
        useBabel: true,
        babelOptions: {
          babelrc: false, /* Important line */
          presets: [
            ["env", { "targets": "last 2 versions, ie 11", "modules": false }]
          ],
          // polyfill
          plugins: ['transform-runtime'],
        },
        babelCore: "babel-core", // needed for Babel v7
        errorsAsWarnings: true, // 范例毛病warning，而不是error
      }
},

经常运用插件

1.HtmlWebpackPlugin
该插件将为你天生一个HTML5文件，个中包括运用script标签的body中的一切webpack包

new HtmlWebpackPlugin({
  // 定义html文件的title，假如指定模板则无效
  title: '我的生涯一片无悔，想起那天下昼旭日下的奔驰，那是我逝去的芳华',
  favicon: './assets/images/favicon.ico',
  template: './template/page.html',
  filename: 'index.html',
  // 只引入指定的进口文件天生的chunks,默许引入一切
  chunks: ['bar'],
  // 将天生的文件插进去html中的位置
  inject: 'body',
  // 给天生的js,css增加一个唯一的hash
  // assets/js/bar.js?b34fce8721458861ac22
  hash: true,
  cache: true
  
  // 运用插件，雄厚template
  // 将天生的文件插进去html中的位置
  // html-webpack-template连系运用时须要置为false
  // 个人以为不好用，不够直观，不玩了
  // inject: false,
  // template: require('html-webpack-template'),
  // appMountId: 'app',
}),

2.clean-webpack-plugin
消灭文件夹，比方消灭之前天生的dist

// 清算dist,默许基于__dirname,能够本身传参设置,
// 假如目次在root以外，则没法顺遂消灭
// root须要包括被消灭目次
new CleanWebpackPlugin(['dist'], {root: path.resolve(__dirname, '../')}),

3.extract-text-webpack-plugin与optimize-css-assets-webpack-plugin
星散cs紧缩css

// 它会将一切的进口 chunk(entry chunks)中援用的 *.css，
// 移动到自力星散的 CSS 文件
// css bundle 与 js bundle 并行加载
test: /\.css$/,
use: ExtractTextPlugin.extract({
  fallback: 'style-loader',
  // 定义文件内部援用的途径
  // 原途径加上../../(基于assets/images/)
  // 用来处置惩罚url文件援用途径不正确题目
  publicPath: '../../',
  use: 'css-loader'
})

// name为进口内里的名字，将抽离的css兼并成文件
// 所以一个进口天生一个css文件，在HtmlWebpackPlugin中
// 将依据进口将对应的css文件绑定到html
// 对每一个进口chunk都天生一个对应的文件
// 所以当你设置多个进口 chunk 的时刻
// 必需运用[name],[id]或[contenthash]
new ExtractTextPlugin('assets/css/[name].css'),

// 紧缩css
new OptimizeCssAssetsPlugin({
  assetNameRegExp: /\.css$/g,
  cssProcessor: require('cssnano'),
  cssProcessorOptions: { discardComments: { removeAll: true } },
  canPrint: true
})

4.new webpack.optimize.UglifyJsPlugin()
紧缩打包后的文件
运用插件替换uglifyjs-webpack-plugin

// 紧缩打包后的文件
new UglifyJSPlugin({
  // 临盆环境运用source-map
  sourceMap: true
})

5.hard-source-webpack-plugin
缓存编译效果，加快编译，效果显著

// 缓存编译效果，收缩编译时候
new HardSourceWebpackPlugin(),

观点

webpack打包的代码分红三个部份，第一个是本身编写的代码，第二部份为引入的第三方库与依靠，第三个部份是webpack用来举行模块加载与逻辑剖析(runtime)和模块交互的部份(mainfest)

publicPath该设置能协助你为项目中的一切资本指定一个基本途径