webpack小记

把工做中经常使用的webpack配置，包括loader、plugins、优化等记录下来，方便学习和查阅。会一直更新本文。

初识webpack

• 在项目里安装 webpack、webpack-cli
• 在根目录新建 webpack.config.js
• webpack4有两种模式：development、production

entry

• 入口文件，能够是对象，数组，字符串。
• 对象，key是能够作输出名字。

output

• path，输出目录，绝对路径。
• filename，输出文件的名字

const config = {
  entry:{
      index:'./index'
  },
  output:{
      filename:'[name].[hash].js',   //[name]是entry里的key，能够加hash
      path:__dirname
  } 
};
复制代码

resolve:

• alias，设置别名。

//a.js
const help = requrie('../libs/help/a.js');
//b.js
const help = requrie('../../../libs/help/b.js');
//咱们看到用到help里某个文件时，要找不少层目录，能够在配置文件里写入别名。
const config = {
    resolve:{
        alias:{
            help:path.resolve(__dirname,"libs/help")
        }
    }
};
//a.js
const help = requrie('help/a.js');
//b.js
const help = requrie('help/b.js');
复制代码

• extensions，省略扩展名，js引入时不须要写扩展名

module

• noParse，若是肯定一个模块没有其余的依赖，能够配置这项。能够提升打包的速度

const config = {
    module:{
        noParse:[/jquery/],
        rules:[
            {
                test:'匹配的文件',
                include:'在哪一个目录查找',
                exclude:'排除哪一个目录',
                loader:'use:[{loader}]的简写',
                use:[
                    //配置多个loader，从有往左依次执行
                    {
                        loader:"须要的loader",
                        options:{
                            //loader的相关配置
                        }
                    }
                ]
            }
        ]
    }
}
复制代码

• rules，是一个规则数组，每一项是一个对象，配置loader。

loader

• 在webpack里，全部的文件都是模块。loader的做用就是把文件转换成webpack能够识别的模块。

ES六、ES七、react

• babel-loader、babel-core
• babel-preset-stage-0 编译ES7
• babel-preset-2015 编译ES6
• babel-preset-react 编译react

{
    module:{
        rules:[
            {
                test: /\.jsx?$/,
                exclude:/node_modules/,
                include:path.resolve(__dirname,'src'),
                use:{
                    loader:'babel-loader',
                    options:{
                        presets:[
                             'es2015','react'
                        ]
                    }
                }
            }
        ]
    }
}
复制代码

css、less、sass

• js里引入css
• style-loader，把css放在style标签里插入html里。
• css-loader，识别css，把css变成一个模块，能够根据options配置css模块化等。
• less-loader 该loader要和less一块儿使用。

npm install --save-dev less-loader less
复制代码

• sass-loader 要和node-sass一块儿使用。

npm install sass-loader node-sass webpack --save-dev
复制代码

const config = {
    module:{
        rules:[
            {
                test: /\.css$/,
                use: [
                    'style-loader', 
                    {
                        loader:'css-loader',
                        options:{
                            modules:true    //css模块化
                        }
                    }
                    ]
            },
            {
                test: /\.less$/,
                use: ['style-loader', 'css-loader', {
                    loader:'less-loader',
                    options:{
                        modifyVars:{
                            "color":"#ccc"  //设置变量
                        }
                    }
                }]
            },
            {
                test: /\.scss$/,
                use: ['style-loader', 'css-loader', 'sass-loader']
            }
        ]
    }
}
复制代码

图片等其余资源

• js里引入图片等资源
• file-loader，在输出目录生成对应的图片

{
    module:{
        rules:[
            {
                test: /\.(png|jpg|gif)$/,
                use: ['file-loader']
            }
        ]
    }
}
复制代码

• url-loader，很像file-loader，把符合大小把图片生成base64，不符合的生成图片

{
    module:{
        rules:[
            {
                test: /\.(png|jpg|gif)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 10*1024,
                            name: '[path][name].[ext]'
                        }
                    }
                ]
            }
        ]
    }
}
复制代码

html

• html-loader 能够把html页面中引入的图片，输出在相应的输出目录

{
    test: /\.(html)$/,
    use: {
        loader: 'html-loader'
    }
}
复制代码

plugins

• webpack提供了丰富的插件接口。插件可让webpack灵活可配置。
• plugins是一个数组，里面是每一个插件的实例。

清理文件

• clean-webpack-plugin 清理文件

const CleanWebpackPlugin = requrie('clean-webpack-plugin');
const config = {
    plugins:[
        new CleanWebpackPlugin(['输出目录'])
    ]
}
复制代码

在html里加入资源

• html-webpack-plugin 设置html模版，让入口js加载到相应的html里，能够根据参数设置js的位置、顺序、是否压缩、加载哪些js、或者不加载哪些js等功能。

const HtmlWebpackPlugin = requrie('html-webpack-plugin');
const config = {
    plugins:[
        new HtmlWebpackPlugin({
            template:'index.html',  //设置模版
            hash:true,  //添加hash
            filename:'hello.html',  //输出名字
               
        })
    ]
}
复制代码

提取css

• extract-text-webpack-plugin，把想要的css提取到相应的文件里
• 为了兼容webpack4要安装next版本
• 须要和loader一块儿使用

npm i extract-text-webpack-plugin@next -S
复制代码

//注：此处的[name]生成后为入口文件的key
const cssExtract = new ExtractTextPlugin('public/[name].[contenthash:8].css');
const lessExtract = new ExtractTextPlugin('public/[name].[contenthash:8].css');
const scssExtract = new ExtractTextPlugin('public/[name].[contenthash:8].css');
const config = {
  module:{
      rules:[
          {
            test: /\.css$/,
            use: cssExtract.extract(['css-loader'])
           },
        {
            test: /\.less$/,
            use: lessExtract.extract({
                use: ['css-loader', 'less-loader']
            })
        },
        {
            test: /\.scss$/,
            use: scssExtract.extract({
                use: ['css-loader', 'sass-loader']	
            })
        }
      ]
  },
  plugins:[
      cssExtract,
      lessExtract,
      scssExtract
  ]  
};
复制代码

压缩混淆代码

• (uglifyjs-webpack-plugin)[https://github.com/webpack-contrib/uglifyjs-webpack-plugin]

const UglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin');
const config = {
  module:{
  plugins:[
      new UglifyjsWebpackPlugin({
        test: /\.js($|\?)/i
      })
  ] 
  } 
};
复制代码

• 或者用webpack的生产模式

webpack --mode production
复制代码

拷贝静态文件

• 有时项目中没有引用的文件，也须要打包到目标目录里
• copy-webpack-plugin

const CopyWebpackPlugin = require('copy-webpack-plugin');
{
    plugins:[
        new CopyWebpackPlugin([
            {
                from:'./src/test',
                to:'./'
            }
        ])
    ]
}
复制代码

监听文件变化

• webpack定时获取文件等更新时间，并跟上次保存的时间做对比，不同就是作了修改。
• poll，每秒钟询问的次数
• aggregateTimeout，监听变化，多少ms后再执行

const config = {
    watch:true,     //watch为true时，watchOptions才生效
    watchOptions: {
        ignored:/node_modules/, //忽略目录
        aggregateTimeout:300,   //监听变化 300ms后再执行
        poll:1000   // 默认每秒询问1000次
    }
}
复制代码

webpack-dev-server

• webpack-dev-server，本地服务器，监听文件变化自动刷新浏览器等功能。
• 文档里是能够实现模块热更替的，我没有实现，有好的教程请告诉我，谢谢！

const webpack = require('webpack');
const config = {
    devServer: {
        hot: true, //写了这项就不会自动刷新，不写就会自动刷新，知道缘由的请留言，谢谢！
        open: true,
        inline:true
    },
    plugins:[
       new webpack.HotModuleReplacementPlugin() //不写会报错，不知道为何。。。
    ]
}
复制代码

总结

记录用到过的webpack loaders、plugins和其余相关配置。后续还会添加提取共代码等其余优化处理。

参考

• webpack