webpack4.0 CheatSheet

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

還在為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…

相關文章