webpack實踐筆記（二）---添加 loaders

cnsworder 發布于2019-08-20 11:06 / 1167人閱讀

摘要：實踐筆記二源碼地址本篇文章基于分支切換分支加載順序分了三個級別，，分別代表前中后，三個處理狀態。安裝相關包創建文件，每個公司采用適合自己的規則。配置文件較大，可查看項目源碼。

webpack實踐筆記（二）--- add loaders [源碼地址]：( https://github.com/silence717... )

本篇文章基于分支step2,切換分支：git checkout step2

loader加載順序

分了三個級別，preloaders,loaders,postloaders，分別代表前中后，三個處理狀態。

添加es6 loader 創建一個es6的文件login.es6

// login.es6
let login = (username, password) => {
    if(username !== "admin" || password !== "123") {
        console.log("incorrect login");
    } else {
        console.log("correct login");
    }
};

login("admin", "123");

需要使用es6，由于瀏覽器支持不夠，我們必須使用babel轉為es5的code。

安裝babel相關的包：

npm install babel-core babel-loader babel-preset-es2015

創建babelrc文件，配置為:

{
  "presets": ["es2015"]
}

webpack-config.js中配置loader

module: {
    loaders: [
        {
            test: /.es6$/,
            exclude: /node_modules/,
            loader: "babel-loader"
        }
    ]
},
resolve: {
    extensions: ["", ".js", ".es6"]
}

運行dev-server，看到文件成功執行，這時我們看到bundle.js中編譯后的code為：

var login = function login(username, password) {
  if (username !== "admin" || password !== "123") {}
};

login("admin", "456");

添加preloader,對js文件進行校驗

我們習慣在項目中使用的是eslint,或者jslint也可以，看個人愛好。

安裝eslint相關包

npm install eslint eslint-loader eslint-plugin-promise eslint-plugin-standard babel-eslint -D

創建.eslintrc文件，每個公司采用適合自己的規則。配置文件較大，可查看項目源碼。 webpack-config.js中添加配置,在此我們采用preloader

preLoaders: [
    {
        test: /.js$/,
        exclude: "node_modules",
        loader: "eslint-loader"
    }
]

重新啟動，如果code中存在不符合規范的，webpack在編譯時候就會出錯，根據提示更改對應文件。

package.json中的scripts

我不能一直使用這么復雜的命令去啟動，so 我們可以在package.json中配置一下scripts：

"scripts": {
    "start": "webpack-dev-server",
}

這樣我們每次啟動只需要執行 npm start 即可。

在此說明兩點：

1、 npm的start是一個特殊的腳本名稱，在命令行中使用npm start就可以執行相關命令，如果對應的此腳本名稱不是start，想要在命令行中運行時，需要這樣用npm run {script name}，如npm run dev.

2、 window環境下不支持&連接命令執行，如：gulp & nodemon mock-server.js。

production vs dev

生產環境我們需要對js進行打包壓縮，而dev環境我們希望使用源碼便于調試。

// 生產環境 
webpack -d
// 開發環境
webpack -p

分別執行這兩個命令，你可以看到bundle.js內容是不相同的，一個壓縮一個未經壓縮。

為了便于管理，我們創建一個webpack-bulid.config.js文件

var devConfig = require("./webpack.config");
module.exports = devConfig;

通常在開發環境我們會經常使用console.log,debug來進行代碼調試，這些其實是不允許帶入生產環境的。
盡管采用一系列限制，但是為了防患于未然，我們引入strip-loader包：

安裝依賴包

npm install strip-loader -D

webpack-build.config.js配置strip-loader

var WebpackStrip = require("strip-loader");
var devConfig = require("./webpack.config");
var stripLoader = {
    test: [/.js$/, /.es6$/],
    exclude: /node_modules/,
    loader: WebpackStrip.loader("console.log", "debug")
};
devConfig.module.loaders.push(stripLoader);
module.exports = devConfig;

設置webpack執行的配置文件

webpack --config webpack-build.config.js  -p

這個命令執行完之后，bundle.js就按照build中的的配置對代碼進行了一系列合作。

說明: webpack --config 用于設置使用哪個配置文件做操作。

為了便于調試，我們全局安裝一個http-server,用于啟動我們的項目。 安裝http-server

npm install http-server -g

運行

http-server

打開瀏覽器訪問http://127.0.0.1:8080/,
此時打開 console，發現并沒有任何東西輸出，這就是strip-loader的作用。
再查看sources中的bundle.js為壓縮后的文件。

云服務器 GPU云服務器 Loaders Loader babel-loader css-loader

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/80394.html

webpack實踐筆記（三）--- 總結

摘要：實踐筆記三總結需要單獨安裝并且在文件中的下進行配置，配置參數有匹配處理的文件的拓展名的正則表達式必須的名稱必須，一般以的方式命名，代表了這個要做的轉換功能，比如。允許你在修改組件代碼后，自動刷新實時預覽修改后的效果。 webpack實踐筆記（三）--- 總結 loaders 需要單獨安裝并且在config文件中的modules下進行配置，配置參數有： test：匹配loaders處理...

tunny 2019-08-20 11:09 評論0 收藏0
webpack深入與實戰筆記（20171015待續...）

摘要：中添加同樣起作用。說明提供的命令，打包時模塊綁定的加載器為命令，監聽打包的文件，只要改變自動會打包命令窗口顯示打包進度命令窗口列出引入的所有模塊命令窗口顯示打包引入模塊的原因標注：本筆記來自 imooc-qbaty老師-webpack深入與實戰gitbash（or CMD）進行命令操作一、準備工作 lenovo@lenovo-PC MINGW64 ~ $ cd /d/imooc/ ...

Airy 2019-08-21 17:03 評論0 收藏0
我的webpack學習筆記（二）

前言上一篇文章我們講了多頁面js的打包，本篇文章我們繼續scss的打包。多頁面css單獨打包首先，我們css編寫采用的是sass，所以我們先來安裝sass-loader以及可以用到的依賴 $ npm install sass-loader node-sass css-loader style-loader --save-dev 安裝完loaders，下面在webpack.config.js...

mcterry 2019-08-20 18:05 評論0 收藏0
我的webpack學習筆記（二）

前言上一篇文章我們講了多頁面js的打包，本篇文章我們繼續scss的打包。多頁面css單獨打包首先，我們css編寫采用的是sass，所以我們先來安裝sass-loader以及可以用到的依賴 $ npm install sass-loader node-sass css-loader style-loader --save-dev 安裝完loaders，下面在webpack.config.js...

awokezhou 2019-08-29 12:57 評論0 收藏0