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

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 便可。

在此說明兩點：

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

• 二、 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爲壓縮後的文件。