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

cnsworder 发布于2019-08-20 11:06 / 1072人阅读

摘要：实践笔记二源码地址本篇文章基于分支切换分支加载顺序分了三个级别，，分别代表前中后，三个处理状态。安装相关包创建文件，每个公司采用适合自己的规则。配置文件较大，可查看项目源码。

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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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