webpack 的学习笔记

webpack 4.x 需要额外安装 webpack-cli

css 单独打包时插件变动

对于非模块化的插件，直接在index.html中使用cdn引入

1.webpack.ProvidePlugin

申明变量并自动引入，前提是该插件已经模块化

new webpack.ProvidePlugin({
  $: 'jquery',
  jQuery: 'jquery'
})

2.html-webpack-plugin

把entry中的入口js 和 extract-text-webpack-plugin 或者 webpack4.x的 mini-css-webpack-plugin
打包成的一个css 生成link和script标签导入 index.html中    

可以指定 chunks 配置多页面多入口的打包
plugins: [
        new htmlWebpackPlugin({
            filename: 'index.html',  //源模板
            template: 'index.html'   //生成之后
]
//
entry:{
    ma: './src/ma', 
    mb: './src/mb'
},
output: {
    path: './dist',
    filename: '[name].js'
},
plugins: [
    new HtmlWebpackPlugin({
        title: '模板A',
        chunks: ['ma']
    }),
    new HtmlWebpackPlugin({
        filename: 'mb.html',
        title: '模板B',
        chunks: ['mb']
    })
]

还要注意：
(1).在源文件中不需要引入 script和link，只需在入口 js中 import
(2).发布之前需要配置 <base href> 指定引用路径

3.extract-text-webpack-plugin 和 webpack4.x 的mini-css-webpack-plugin 

把所有引入的css打包成一个css

用css-loader编译css文件，或者其他的sass-loader
用style-loader提取

module.exports = {
 module: {
  rules: [
   {
    test: /\.css$/,
    use: ExtractTextPlugin.extract({
     fallback: "style-loader",
     use: ["css-loader","sass-loader"]
    })
   }
  ]
 },
 plugins: [
  new ExtractTextPlugin("styles.css"),
 ]
}

**** 在webpack4.x中使用   

注意 loader在use中是从右到左执行的
module:[
rules: [
      {
        test: /\.css$/,
        use: [
           MiniCssExtractPlugin.loader,
          "css-loader"
        ]
      }
    ]
],
plugins: [
    new MiniCssExtractPlugin("main.css")
]

4.url-loader的使用

css中字体，图片等路径等问题

{
    test: /\.(jpeg | png)$/,
    use: {
    loader:'url-loader',
    options:{
     limit:"20000"  //大约 20kb的图片会转换成base64直接放在css中    
     outputPath:'img/'  //被处理过的图片的输出位置
     }
    }
}

5.使用es6或者typescript
(1).使用typescript
npm install --save-dev typescript ts-loader
{
       test: /\.tsx?$/,
       loader: 'ts-loader',
       exclude: /node_modules/
},
(2).使用es6
npm install --save-dev babel-loader babel-core
npm i -D babel-preset-es2015
{
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: path.resolve(__dirname,"./node_modules"),
                options: {
                    'presets': ['es2015']
                }
}