首页 > 代码库 > webpack 小记

webpack 小记

2024-09-28 08:51:02   217人阅读

零、入口与输出

 

//对像语法

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‘                //生产环境

//具体原理待研究




 
webpack 小记






























        

            
                
                  
                
                

                    联系

                    我们