webpack4学习笔记2

webpack编译es6 es7

npm install -D babel-loader @babel/core @babel/preset-env    // webpack 4.x | babel-loader 8.x | babel 7.x

rules配置：

        {
          test:/\.js$/,
          use:{
            loader:'babel-loader',
            options:{
                presets:[
                    ['@babel/preset-env',
                    {
                       targets:{

                          browsers:['> 1%','last 2 versions']
                          //chrome:'52'
                          //设置浏览器支持
                       }    
                    }]
                ]
            }
          },
          exclude:'/node_modules/'
          //不编译的文件夹，为了提高编译效率
        }

更多的需求和功能还在摸索当中，关于es6的编译也可以直接在src在新建.babelrc文件进行配置。

调试配置

    devtool: 'source-map', // 单独文件，可以定位哪一列出错
    devtool: 'cheap-module-source-map', // 单独文件，体积更小，但只能定位到哪一行出错
    devtool: 'eval-source-map', // 不会生成单独文件
    devtool: 'cheap-module-eval-source-map', // 不会生成单独文件，只能定位到行，体积更小

webpack源文件修改后webpack重新打包

    watch: true,
    watchOptions:{
      ignored: /node_modules/, // 不监听这个文件
      poll: 1000, //每秒询问次数
      aggregateTimeout: 500, // 文件修改之后500毫秒再编译
    },

将根目录的public 文件夹下的文件拷贝的dist目录下

npm i copy-webpack-plugin -D

const CopyWebpackPlugin = require("copy-webpack-plugin"); // 引入这个插件

plugin配置

      new CopyWebpackPlugin([{
        from: path.join(__dirname,'public'), // 目标文件
        to: path.join(__dirname,'dist/public'), // 输出目录
      }])

css压缩

安装这个插件

 npm install optimize-css-assets-webpack-plugin --save-dev

在配置文件中引入这个插件

const optimizeCss = require('optimize-css-assets-webpack-plugin');

plugin配置

new optimizeCss()

压缩js

$ npm install uglifyjs-webpack-plugin --save-dev

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

new UglifyJsPlugin()

路径别名配置

    resolve:{
      extensions: ['.wasm', '.mjs', '.js', '.json'], //引入模块时可以不加扩展名
      alias:{
        '@': path.resolve('src'),
        'test1':path.resolve('src/page/pageView/test.js'),
      }
    },

去除多余的css

npm install purifycss-webpack purify-css glob -D

const PurifycssWebpack = require("purifycss-webpack");
const glob = require("glob");

      new PurifycssWebpack({
        //*.html 表示 src 文件夹下的所有 html 文件，还可以清除其它文件 *.js、*.php···
        //注意这里是 paths ！！！笔者已经写错好多次少了个s了！！！
        paths: glob.sync(path.resolve("./src/*.html"))
      }),