webpack实践笔记（二）---增加 loaders

2024年3月6日 124次阅读 来源: silence

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为紧缩后的文件。

    原文作者：silence
    原文地址: https://segmentfault.com/a/1190000006932131
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞