webpack4.0 CheatSheet

小美娜娜發表於2019-03-21
Web

還在為webpack的配置而煩惱嗎？這裡有一份webpack從簡易到高階版本的配置。還附贈配置地址，你想要嗎？不，你不想。老老實實自己配置去吧。

壓箱底的筆記而已，大家看看樂樂就好了，這是筆者為了練習webpack而嘗試了不同的配置方式，參考了create-react-app的webpack配置。以及學習瞭如何自己寫一個簡易的proxy。

Loaders全配置

Loader 作用
html-loader ---
html-webpack-plugin ---
style-loader ---
mini-css-extract-plugin 劃重點，webpack4.0之後不再使用extract-text-webpack-plugin
css-loader 一個將CSS變成JS的loader，筆者認為它的modules模組化是一個很實用的功能，大愛
sass-loader 一個SASS的處理器，先將scss編譯成css，然後css再做進一步的處理
node-sass 編譯scss依賴的包
postcss-loader 一款配合autoprefix，autoprefixer.github.io/ 自動給CSS加惱人的字首
ts-loader 如果不用babel編譯ts，則需要ts-loader
file-loader 匯入檔案，比如json，變成js的格式
url-loader 類似於file-loader，不過比file-loader智慧，在檔案過大的情況下可以只載入一個地址，而不用將檔案載入
babel-loader 別說了，es6就需要他編譯
webpack 大家都懂的，核心
webpack-cli 有了啟動編譯變得簡單

babel配置

現在二進位制可以直接編譯js

npx babel src --out-dir lib
複製程式碼

大聲告訴我Babel是幹什麼的？ ——因為JS語法一直在修訂進步，而使用者使用的瀏覽器更新頻率不如JS語法更新的快，因此需要一個編譯JS語法，使相容支援不同時期JS語法的瀏覽器。

npm install --save-dev @babel/core @babel/cli @babel/preset-env
npm install --save @babel/polyfill
npm install --save-dev bable-loader
複製程式碼
@babel/polyfill vs @babel/preset-env
無視語法，直接require缺失api 救得了各種新穎寫法（如箭頭函式），救不了api
核心包core/js

@babel/preset-env

babel-preset-es2015
babel-preset-es2016
babel-preset-es2017
babel-preset-latest
A combination of the above ^
....
複製程式碼

噩夢般的配置，剛學習babel的時候，看到這些配置，隱約覺得自己學不會了。但是現在babel-preset-env就可以搞定所有了！。

@babel/plugin-proposal-class-properties babeljs.io/docs/en/bab…

@babel/polyfill

這個包已經被babel給移除了，它僅僅是core-js的別名。

其他plugin

REACT全配置

多安裝一個babel即可


npm install --save-dev @babel/preset-react
npm install --save-dev react react-dom
複製程式碼

TS全配置

npm install --save-dev typescript
複製程式碼

ts可以用babel編譯

npm install --save-dev @babel/preset-typescript
複製程式碼

ts也可以用ts-loader編譯，需要配置tsconfig.js

npm install --save-dev ts-loader
複製程式碼

有關CSS載入的一些見解

CSS loader可以很簡單，也可以相當複雜，一般的需求有以下幾點：

  • 有效CSS，直接inline的載入
  • 希望可以單獨生成一個檔案，然後url載入
  • 希望可以壓縮一下
  • 想要自動加字首的功能
  • 使用SCSS等，高階CSS處理器

參考create-react-app的配置檔案，寫的一個一本滿足的css loader大餐：

// mini-css-extract-plugin，有了他可以代替style-loader，不僅壓縮了檔案，還可以幫助我們將CSS從js中剝離出來
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

//loaders的主體，按照loader的順序應該是先是預處理，比如Scss，然後是加字首prefix，到此為止大家還是CSS的樣子，等到了css-loader，css就變成了js，最後style-loader或者minicss將css模組再變成js生成檔案或者內聯。
const getStyleLoaders = (cssOptions, preProcessor,env) => {
    const loaders = [
        // 此處是最後一步，將CSS提取出或者內聯
        {loader:env==="development"?require.resolve('style-loader') : MiniCssExtractPlugin.loader},
        // 此處將CSS變成標準的JS模組，如果有css模組化的需求，是在此處理
        {
            loader: require.resolve('css-loader'),
            options: cssOptions,
        },
        // 此處將CSS預處理處，一般是給css加上惱人的字首，這裡可以設定瀏覽器的版本，你需要哪些瀏覽器的支援
        {
            loader: require.resolve('postcss-loader'),
            options: {
                ident: 'postcss',
                plugins: () => [
                require('postcss-flexbugs-fixes'),
                require('postcss-preset-env')({
                    autoprefixer: {
                    flexbox: 'no-2009',
                    },
                    stage: 3,
                }),
                ],
            },
        },
    ];
    // 此處如果有sass等預處理的需求，需要在此配置
    if (preProcessor) {
        loaders.push(require.resolve(preProcessor));
    }
    return loaders;
};
// style files regexes，這裡是為了避免重複配置css的各種型別
const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;

// 匯出給webpack配置使用
module.exports={getStyleLoaders,cssRegex,cssModuleRegex,sassRegex,sassModuleRegex}

複製程式碼

HMR熱更新配置——減少手動編譯重新整理頁面

webpack自帶的伺服器

npm install --save-dev webpack-dev-server
複製程式碼
devServer: {
    contentBase: path.join(__dirname, 'dist1'),
    compress: true,
    hot: true,
    port: 9000
},
entry: [
    require.resolve('webpack-dev-server/client') + '?/',
    require.resolve('webpack/hot/dev-server'),
    path.resolve(__dirname,'src/index')
],
plugins: [
    new webpack.HotModuleReplacementPlugin()
]
複製程式碼

webpack自帶的伺服器的跨域問題

devServer: {
    proxy: {
      '/slider': {
          target: 'http://www.cherryvenus.com/',
          secure: false,
          changeOrigin: true//important 能解決大多數404無法訪問的問題
      }
    }
},
複製程式碼

自定義伺服器

npm install --save-dev express webpack-hot-middleware webpack-dev-middleware
複製程式碼

client，webpack，此處不能忘，其實就是一個連結websocket的一個類似於外掛的程式，記得production的時候將此處移除，不然bundle會很大呢。

entry: [
    require.resolve('webpack-hot-middleware/client') + '?path=/__what&timeout=2000&overlay=false',
    path.resolve(__dirname,'src/index')
],
plugins: [
    new webpack.HotModuleReplacementPlugin()
]
複製程式碼

server，此處的path配置需要和客戶端的path一致。

app.use(require("webpack-hot-middleware")(compiler,{
  log: false,
  path: "/__what",
  heartbeat: 2000
}));
複製程式碼

entry入口的client新增模組，不accept，程式無法自動重新整理。

if(module.hot){
  module.hot.accept()
}
複製程式碼

http-proxy-middleware——解決開發中的跨域問題

npm install --save-dev http-proxy-middleware
複製程式碼
var proxyMiddleWare = require("http-proxy-middleware");
var proxyPath = "http://www.cherryvenus.com/";
var proxyOption ={target:proxyPath,changeOrigoin:true};
app.use(proxyMiddleWare("/slider",proxyOption))
複製程式碼

壓箱底的proxy研究

基於第三方外掛的proxy配置開發

無論是http-proxy-middleware還是webpack-dev-server的proxy都是基於http-proxy-middleware，而http-proxy-middleware是基於node-http-proxy。

參考網址：

github.com/nodejitsu/n…

github.com/chimurai/ht…

var proxyPath = "http://www.cherryvenus.com/";
var proxyOption ={target:proxyPath,changeOrigin:true,selfHandleResponse : true,ignorePath:true};
const proxy = httpProxy.createProxyServer({})

//如果selfHandleResponse為true就是可以自己修改獲得的內容，如果不需要修改就是獲取轉發就無需設定了。


// 如果想要自定義獲取到的內容，則可以通過觸發這個事件`proxyRes`來截獲內容並修改

proxy.on('proxyRes', function (proxyRes, req, res) {
    var body = new Buffer('');
    
    // 這裡筆者複製了header資訊，省去了一波配置
    
    for(let i in proxyRes.headers){
        res.setHeader(i, proxyRes.headers[i]);
    }
    proxyRes.on('data', function (data) {
        body = Buffer.concat([body, data]);
    });
    proxyRes.on('end', function () {
        body = Buffer.from(body);
        res.write(body);
        res.end()
        res.rs()
    });
    proxyRes.on('error', function (err, req, res) {
        res.writeHead(500, {
          'Content-Type': 'text/plain'
        });
        res.end('Something went wrong. And we are reporting a custom error message.');
    });
})

// 此處僅僅是配置了一個連結而已，真正觸發代理，是下方的proxy.web(req, res, proxyOption);

app.use("/slider/",(req, res, next)=>{
    // 當地址地位到
    let p= new Promise((rs,rj)=>{
       // 先關閉之前的代理，如果有
        proxy.close();
        res.rs=rs
        // 請求一個新的連結
        proxy.web(req, res, proxyOption);
    })
    p.then(()=>{
        next()
    })
    return p
})
複製程式碼

手動寫一個

看到上面的解決方法，突然靈光一閃，那麼我是不是可以自己寫一個呢？這個流程並不複雜，其實代理就是抓取網頁然後轉發的過程，既然如此，寫一個簡易的proxy並不是什麼難事。

const http=require("http")
// 建立伺服器
http.createServer({ host : 'localhost'}, (req, res) => {
    // 開啟一個請求
    http.get('http://www.baidu.com', (res1) => {
        // 抓取內容
        var body = new Buffer('');
        res1.on('data', (chunk) => { 
            body = Buffer.concat([body, chunk]);
         });
        res1.on('end', () => {
            body = Buffer.from(body);
            // 複製頭部資訊
            for(let i in res1.headers){
                res.setHeader(i, res1.headers[i]);
            }
            // 返回內容，代理成功
            res.write(body);
            res.end();
        });
    }) 
}).listen(8000);
複製程式碼

代理就是如此簡單，當然這只是一個原理，一種實現方法，就是抓取網頁再列印到頁面上。

然後筆者在查閱node中http發現一個驚為天人的寫法（也許是筆者見識淺薄），一個利用了Http的method為CONNECT的方法，將當前連結處於連結狀態，也就是不會斷，然後用 net.connect這個方法，連結到了請求連結，建立了互讀互寫的管道。

const http=require("http")
const net=require("net")
const url=require("url")
const proxy = http.createServer((req, res) => {
    const options = {
        port: 1337,
        host: 'localhost',
        method: 'CONNECT',//會觸發"connect" https://nodejs.org/api/http.html#http_event_connect
        path: 'www.baidu.com:80'
    };
    const req1 = http.request(options);
    req1.end();
    req1.on('connect', (res1, socket, head) => {
        let context=new Buffer("")
        // make a request over an HTTP tunnel
        socket.write('GET / HTTP/1.1\r\n' +
                    'Host: www.baidu.com:80\r\n' +
                    'Connection: close\r\n' +
                    '\r\n');
        socket.on('data', (chunk) => {
            context = Buffer.concat([context, chunk]);
        });
        socket.on('end', () => {
            for(let i in req.headers){
                res.setHeader(i, req.headers[i]);
            }
            context=context.toString().split("\n\r\n")
            context.shift()
            res.end(context.join(""))
        });
    });
}).listen(1337);
proxy.on('connect', (req, cltSocket, head) => {
    const srvUrl = url.parse(`http://${req.url}`);
    const srvSocket = net.connect(srvUrl.port, srvUrl.hostname)
    cltSocket.write('HTTP/1.1 200 Connection Established\r\n' +
    'Proxy-agent: Node.js-Proxy\r\n' +
    '\r\n');
    srvSocket.write(head);
    //管道建立了互讀互寫
    srvSocket.pipe(cltSocket).pipe(srvSocket)
});
複製程式碼

這個方法的簡易原理是這樣的，當你訪問http server的時候，http server調起了一個訪問自身連結，並且設定method為CONNECT，也就是不間斷的意思，並建立了一個clientSocket，然後此http server也監聽了connect的事件，當有method為CONNECT的連結的時候，會觸發http server的connect。此時連結打通之後，http server就會建立一個net的連結，去訪問需要代理的網站，返回一個serverSocket，然後serverSocket負責讀取內容，然後寫入clientSocket，clientSocket再告訴serverSocket寫入成功，直至代理成功。

webpack的拆包實踐（三種方法）

optimization.splitChunks

真拆包，參考連結

module.exports = {
  //...
  optimization: {
    splitChunks: {
      // ...
      minChunks: 2,// 這個屬性配置了當前模組在不同的模組中出現的次數，如果出現了引用兩次的情況，則複用打包出來，這個是真拆包，拆的自己包。
      // ...
    }
  }
};
複製程式碼

externals剔除不必要的依賴包

只要注意root的問題，root在web下相當於window，因此是window.React，prop-type更不用說了。

externals:{
    react:{ 
       root: 'React',
       amd: 'react',
       commonjs: 'react',
       commonjs2: 'react' 
    },
    "prop-types":{ 
      root: 'PropTypes',
      amd: 'prop-types',
      commonjs: 'prop-types',
      commonjs2: 'prop-types' 
    }
}
複製程式碼

dll和external的區別

exteranl是剔除別人的包。

dll是建立自己的工具庫。

const library = '[name]_lib'
module.exports = {
  mode:"production",
  entry: {
    vendors: ['react', 'react-dom']
  },
  output: {
    filename: '[name].dll.js',
    path: path.join(__dirname,"dist/vendor"),
    //libraryTarget: "umd",
    library
  },
  plugins: [
    new webpack.DefinePlugin({ 
      'process.env': { //用於打包react中的東西
        NODE_ENV: JSON.stringify("production")
      } 
    }),
    new webpack.DllPlugin({
      path: path.join(__dirname, 'dist/[name]-manifest.json'),
      // This must match the output.library option above
      name: library
    }),
  ]
}
複製程式碼

production中使用動態連結庫，此處不要配置external。

new webpack.DllReferencePlugin({
    context: __dirname,
    manifest: path.join(__dirname, 'dist/vendors-manifest.json'),
})
複製程式碼

我的部落格即將同步至騰訊雲+社群，邀請大家一同入駐：cloud.tencent.com/developer/s…

相關文章