webpack 小记

Posted 2020-09-20 大泽队长

零、入口与输出

---

 

//对像语法

entry: {

　　 aa: __dirname + ‘/src/aa.js‘,    //(chunkName ：path)

　　 bb: __dirname + ‘/src/bb.js‘

},

output: {

　　filename: ‘[name]-[hash].js‘,

　　path: __dirname + ‘/dist‘

}

 

//单入口

entry: ‘./src/aa.js‘,

output: {
　　  filename: ‘bundle.js‘,            
　　  path: __dirname + ‘/dist‘  //绝对路径（__dirname为文件所在目录的绝对路径）
  }

//数组

entry: [ ‘./src/aa.js‘ , ‘./src/bb.js‘],
output: {

　　filename: [变量] + ‘.js‘,

　　path: __dirname + ‘/dist‘

}

 

 

 

一、提取公共代码

---

plugins:[
　　new webpack.optimize.CommonsChunkPlugin({

　　　　name: ‘common‘,
　　　　filename: ‘aa.js‘,      //忽略则以name为输出文件的名字，否则以此为输出文件名字
　　　　chunks: [‘aa‘, ‘bb‘],
　　　　minChunks: true

　　　})

]

name 或者 names：创建的chunk的名称，如果是 names 数组，则相当于为数组里的每个chunk 实例化插件;

filename：输出的 chunk的文件名;

chunks：这是一个元素为 chunk.name的数组，插件将会从这些 chunks 里提取 common chunks（若忽略，所有chunk都被选择）;

minSize：非必填，common chunk 的文件大小至少有 minSize 才会被创建；

minChunks：至少有minChunks个 chunk 共有的代码 才会被提取（Infinity：chunk里引用的模块不会被提取；true：chunk里的所有公共部分都会提取）； 

 

（若想将css从common chunk中 提取出单独的css文件：

loaders:[{
   test: /\.css$/,
   use: ExtractTextPlugin.extract({
      fallback: ‘style-loader‘,
      use: ‘css-loader‘
   })
},...]

plugins：[
   new ExtractTextPlugin({
      filename: ‘[name].css‘,
      allChunks: true
   }),
]   

）

 二、加载器

---

 

module: {

　　 loaders: [ {

　　　　 test: /\.js$/, loader: ‘babel-loader‘,    //必须加‘-loader’

　　　　 exclude: /node_modules/,

　　　　 query: { presets: [‘es2015‘] }

　　},{
　　　 test: /\.css$/,
　　　 loader: ‘style-loader!css-loader‘

　　},{
　　　　test: /\.scss$/,
　　　　loader: ‘style-loader!css-loader!sass-loader?sourceMap=true!postcss-loader‘  //我们需要在js文件里，通过require的方式来引入css，需要安装css-loader， 
                                                     style-loader(安装style-loader的目的是为了在html中以style的方式嵌入css)。

　　} ]

}

 

三、HTML自动引用 JS/CSS

---

 

安装 npm install --save-dev html-webpack-plugin 

plugins: [
       new HtmlWebpackPlugin({
　　　　　　filename: ‘views/list.html‘,
　　　　　　template: ‘src/modules/app/list/index.html‘, 
　　　　　　chunks: [‘common‘, ‘List‘], 
　　　　　　hash: true}),
    ]

/**
*filename - 输出文件名，相对路径output.path
* template - HTML模板，相对配置文件目录
* chunks - 只包含指定的文件（打包后输出的JS/CSS）,不指定的话，它会包含生成的所有js和css文件
* excludeChunks - 排除指定的文件（打包后输出的JS/CSS），比如：excludeChunks: [‘dev-helper‘]
* hash
**/

 

四、自动添加兼容前缀（使用postcss的autoprefixer插件）

---

 

plugins: [ 
      new webpack.LoaderOptionsPlugin({
          options: {
                 postcss: function(){
                    return [
                         require("autoprefixer")({
                            browsers: [‘ie>=8‘,‘>1% in CN‘] ,  //([‘android >= 2.3‘,‘ios>=7‘])
　　　　　　　　　　　　　　　　cascade: true,             //美化属性值（冒号对齐）
                         })
                     ]
                 }
             }
         })

  也可以配置 postcss.config.js  而不写在plugins里：

module.exports = {
    plugins: [
        require(‘autoprefixer‘)({ /* ...options */ })
    ]
}

　　或直接使用autoprefixer-loader：

loaders: [{
    test: /\.css$/,
    loader: ‘style-loader!css-loader!autoprefixer-loader?{browsers:["last 2 version", "android>=2.3"]}‘,
//...
}]

 

 五、自动刷新

---

安装 npm install --save-dev webpack-dev-server 

配置

devServer: {
    contentBase: "./public",    //本地服务器所加载的页面所在的目录
    //colors: true,                  //终端中输出结果为彩色(新版本已取消该属性)
    historyApiFallback: true,   //不跳转
    inline: true,                    //实时刷新
    port : ‘8008‘                   //默认8080
  }

命令：

webpack-dev-server --inline

 

 

 

六、Source Map

 

---

 

 devtool: ‘eval-source-map‘        //开发环境
 
 devtool: ‘source-map‘                //生产环境

//具体原理待研究