2020-03-04

                                                如何配置webpack4打包工具

安装前先npm初始化

npm init-y    //初始化

npm addwebpack webpack-cli -D  //安装本地

constpath= require('path')   // 相对路径变绝对路径

module.exports ={

 mode: 'production', // 模式 默认 production development

 entry: './src/index',    // 入口

 output:{

    filename: 'bundle.[hash:8].js',   // hash: 8只显示8位

    path:path.resolve(__dirname, 'dist'),

    publicPath: '' // // 给所有打包文件引入时加前缀，包括css，js，img，如果只想处理图片可以单独在url-loader配置中加publicPath

 }

}

本地服务

npm add webpack-dev-server -D

devServer: {//开发服务器的配置

  port: 3000,

  progress: true          //滚动条

  contentBase: './build'  //起服务的地址

  open: true              //自动打开浏览器

  compress：true         // gzip压缩

}

复制html

npm add html-webpack-plugin -D

const HtmlWebpackPlugin = require('html-webpack-plugin')

plugins: [ // 放着所有webpack插件

  new HtmlWebpackPlugin({ //用于使用模板打包时生成index.html文件，并且在run dev时会将模板文件也打包到内存中

    template: './index.html', //模板文件

    filename: 'index.html', //打包后生成文件

    hash: true, //添加hash值解决缓存问题

    minify: { //对打包的html模板进行压缩

      removeAttributeQuotes: true, //删除属性双引号

      collapseWhitespace: true //折叠空行变成一行

    }

  })

]

html-webpack-plugin#options

处理css

npm add css-loader style-loader -D

// css-loader   作用：用来解析@import这种语法

// style-loader 作用：把 css 插入到head标签中

// loader的执行顺序： 默认是从右向左（从下向上）

module: {    //模块

  rules: [   //规则

    // style-loader把css插入head标签中

    // loader功能单一

    //多个loader 需要[]

    //顺便默认从右到左

    //也可以写成对象方式

    {

      test: /\.css$/,   // css处理

      // use: 'css-loader'

      // use: ['style-loader', 'css-loader'],

      use: [

        // {

        //     loader: 'style-loader',

        //     options: {

        //         insertAt: 'top' //将css标签插入最顶头  这样可以自定义style不被覆盖

        //     }

        // },

        MiniCssExtractPlugin.loader,

        'css-loader', // css-loader用来解析@import这种语法,

        'postcss-loader'

      ]

    }

  ]

}

处理less

npm add less less-loader -D

{

  test: /\.less$/,   // less处理

  // use: 'css-loader'

  // use: ['style-loader', 'css-loader'],

  use: [

    // {

    //     loader: 'style-loader',

    //     options: {

    //         insertAt: 'top' //将css标签插入最顶头  这样可以自定义style不被覆盖

    //     }

    // },

    MiniCssExtractPlugin.loader,   //这样相当于抽离成一个css文件， 如果希望抽离成分别不同的css, 需要再引入MiniCssExtractPlugin，再配置

    'css-loader', // css-loader用来解析@import这种语法

    'postcss-loader',

    'less-loader' // less-loader less -> css

    // sass node-sass sass-loader

    // stylus stylus-loader

  ]

}

less-loader

抽离css文件，通过link引入

npm  addmini-css-extract-plugin -D

mini-css-extract-plugin

const MiniCssExtractPlugin = require('mini-css-extract-plugin')

// 压缩css

plugins: [

  new MiniCssExtractPlugin({

      filename: 'css/main.css'

  })

]

{

  test: /\.css$/,   // css处理

  // use: 'css-loader'

  // use: ['style-loader', 'css-loader'],

  use: [

    // {

    //     loader: 'style-loader',

    //     options: {

    //         insertAt: 'top' //将css标签插入最顶头  这样可以自定义style不被覆盖

    //     }

    // },

    //此时不需要style-loader

    MiniCssExtractPlugin.loader,   //抽离

    'css-loader', // css-loader用来解析@import这种语法,

    'postcss-loader'

  ]

}

抽离css插件文件时可使用optimize-css-assets-webpack-plugin优化压缩css以及js文件

npm add optimize-css-assets-webpack-plugin-D

压缩css和js

npm add optimize-css-assets-webpack-plugin-D

/ 用了`mini-css-extract-plugin`抽离css为link需使用`optimize-css-assets-webpack-plugin`进行压缩css,使用此方法压缩了css需要`uglifyjs-webpack-plugin`压缩js

const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin")

const UglifyJsPlugin = require("uglifyjs-webpack-plugin")

module.exports = {

  optimization: {              //优化项

    minimizer: [

      new UglifyJsPlugin({     //优化js

        cache: true,           //是否缓存

        parallel: true,        //是否并发打包

        // sourceMap: true     //源码映射set to true if you want JS source maps

      }),

      new OptimizeCSSAssetsPlugin({})    // css的优化

    ]

  },

  mode: 'production',

  entry: '',

  output: {},

}