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/, // 不監(jiān)聽這個文件
      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"))
      }),