首页 > 代码库 > webpack 小记

webpack 小记

零、入口与输出


 

//对像语法

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 小记