webpack4.0配置記錄（1）

趁着假期閒暇，練習下webpack4.0的一些配置。

webpack4優化壓縮js和css方式

let UglifyJsPlugin = require("uglifyjs-webpack-plugin");
let OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
optimization: {//優化項
    minimizer: [
        new UglifyJsPlugin({
            cache: true,
            parallel: true,//併發打包
            sourceMap: true // set to true if you want JS source maps
        }),//開發環境下不壓縮js，想啓用壓縮功能，須要把mode切換爲production
        new OptimizeCSSAssetsPlugin({})
    ]
},

注意：若想優化生效，必須將mode改成production模式
詳情見npm官網

expose-loader 暴露全局loader，稱爲內聯loader。到目前爲止，有內聯loader，普通normal loader，前置loader (pre loader)，後置loader （post loader）

在項目中引入jquery相似模塊方式

webpack.config.js配置

let webpack =require('webpack');
plugins:[//存放webpack插件
    new webpack.ProvidePlugin({//在每一個模塊中注入$
        '$':'jquery'
    })
],

webpack引入基層模塊方式

1. expose-loader暴露到全局window上
2. providePlugin給每一個模塊提供$
3. cdn方式引入不打包，webpack須要配置externals

打包文件分類

new MiniCssExtractPlugin({
    filename:'css/main.css'
}),

將css打包在css文件夾中

{
    test:/(.png|.jpg)$/,
    use:{
        loader:'url-loader',
        options:{
            limit:50*1024,
            outputPath:'images/',
            //publicPath:''
        }
    }
}

圖片打包路徑前配置publicPath便可。

生成source-map便於調試，幾種不一樣選項

(1)增長源碼映射文件，便於調試。標示報錯文件行和列，大而全文件

devtool:'source-map'

(2)不會產生單獨文件，可是能夠顯示行和列

devtool:'eval-source-map'

(3)不會產生列，可是是一個單獨的映射文件，用於調試

devtool:'cheap-module-source-map'

(4)不會產生文件，集成在打包後的文件中，也不會產生列

devtool:'cheap-module-eval-source-map'

監聽文件變更，實時打包

watch:true,
watchOptions:{//監聽選項
    poll:1000,//每秒問我1000次，是否打包
    aggregateTimeout:500,//防抖
    ignored:/node_modules///不須要監控的文件
},

webpack插件應用

1. cleanWebpackPlugin(須要安裝依賴模塊)

new CleanWebpackPlugin('./dist')//先清空dist目錄下的文件在打包

1. copyWebpackPlugin(須要安裝依賴模塊)

new CopyWebpackPlugin([
    {
        from:'./doc',
        to:'./dist'
    }//能夠寫多個，拷貝多個目錄文件
])

1. bannerPlugin(內置插件)

//添加版權註釋信息
new Webpack.BannerPlugin('make by mgl 2019-2-1')

運行打包命令後，可在打包文件中看到註釋信息

npm run dev

webpack中devServer幾種配置

(1)單純配置跨域代理方式

proxy:{
     '/api':{
         target:'http://localhost:3000',
         pathRewrite:{'/api':''}
     }
}

(2)前端單純mock數據

before(app){
    app.get('/user',(req,res)=>{
        res.json({name:'mgl-before'});
    })
}

(3)有服務端，不用代理來處理，在服務端中啓動webpack，用服務端端口

//express

let express = require('express');
let webpack=require('webpack');
//引入中間件
let middle=require('webpack-dev-middleware');

let config=require('./webpack.config.js');

let compiler=webpack(config);//webpack處理返回結果

let app=express();
app.use(middle(compiler));

app.get('/user',(req,res)=>{
    res.json({name:'mgl'});
})

app.listen(3000)

resolve屬性配置

resolve:{//解析第三方模塊
    modules:[path.resolve('node_modules')],
    extensions:['.js','.css','.vue','.json']//指定解析後綴名稱，從左向右
    // mainFields:['style','main']//指定引入模塊的前後順序
    // mainFiles:[],//指定入口文件的名字，默認是index.js
    // alias:{//配置別名
    //     bootstrap:'bootstrap/dist/css/bootstrap.css'
    // }
},

陸續更新中，歡迎關注我的博客，同步更新中！