html5构建工具,前端构建工具: 配置抽离

前置

如果你曾使用 webpack 构建应用，就会知道如果把所有配置都写在 webpack.config.js 中那将是灾难。正如你所见，我现在使用的这套博客园皮肤是使用 gulp 构建的，如果你不熟悉 gulp, 那你肯定熟悉 webpack. 下面将介绍我使用这两个工具是如何抽离配置的，先从 webpack 开始.

webpack

原因

webpack 默认的 webpack.config.js 长这样:

module.exports = {

entry: {},

output: {},

module: {}

//...

}

这里最让人头疼的就是 module 内的层层嵌套。例如，我稍稍处理 css 和 js 就会像下面这样:

module: {

rules: [

{

test: /\.css$/,

use: [

'style-loader',

{

loader: 'css-loader',

options: {

importLoaders: 1,

},

},

'postcss-loader',

],

},

{

test: /\.js$/,

exclude: /node_modules/,

use: [

{

loader: 'babel-loader',

options: {

presets: ['@babel/preset-env'],

},

},

{

loader: 'eslint-loader',

options: {

cache: true,

},

},

],

},

],

},

如果再去区分生产环境和开发环境可能看起来更加混乱。好一点的做法是，抽离不同环境的 module 或者其他配置，根据环境来决定最终导出的项。但是无法改变的是这些东西都存在一个 webpack.config.js 文件中。如果应用程序需要使用大量的 loader, 会显得文件又长又混乱，需要修改一些配置时容易出错。寻找和出错都会浪费时间.

webpack-merge

npm i -D webpack-merge

Webpack-merge 提供了一个函数，该函数将数组串联并合并创建新对象的对象。如果遇到函数，它将执行它们，通过算法运行结果，然后再次将返回的值包装在函数中。

语法

// 默认的方式

const output = merge (object1, object2, object3, ...);

// 数组对象

// 这适用于所有可用的功能。

const output = merge ([object1, object2, object3]);

// 右边优先

const output = merge (

{ fruit: "apple", color: "red" },

{ fruit: "strawberries" }

);

一般使用默认的方式就够了，深入了解 Webpack-merge. 接下来不在使用 webpack.config.js, 在项目根目录新建 config 文件夹。文件夹下新建:

webpack.base.js 公共的配置

webpack.dev.js 开发环境配置

webpack.prod.js 生产环境配置

webpack.base.js

const path = require ("path")

module.exports = {

entry: {

// 这里是多入口

index: "./src/main.js",

reacg: "./src/themes/reacg/index.js"

//...

},

output: {

filename: "[name].min.js",

path: path.join (__dirname, "..", "dist")

},

resolve: {

alias: {

"@": path.resolve ("src")

}

}

}

这里需要注意的一点是 output.path 需要处理一下路径.path.join (__dirname,"..","dist"), 这样就能够和原来一样将打包得到的 dist 目录输出到根目录.

这句代码的意思是获取当前绝对路径的上一层路径，就是项目的根目录了。另外的 webpack.dev.js 和 webpack.prod.js 根据项目需要分别配置就可以了。这样如果再去添加或修改一些配置就能一目了然了。最后还需要更改一下 package.json 中的 script:

"scripts": {

"start": "webpack-dev-server --config config/webpack.dev.js",

"build": "webpack --config config/webpack.prod.js"

},

npm start 在本地启动

npm run build 打包项目

另外，如果你有兴趣，这里有一个使用 webpack 构建的 DEMO 供你参考:

gulp

如果你使用 gulp 构建应用，抽离它的配置就相当简单了。正常情况下，根目录下有一个 gulpfile.js 文件，在这里做一些配置。最后通过 exports 导出配置，通过 gulp 命令或者自定义命令来运行 task (任务). 要将不同环境的配置分开写只需要将 gulpfile.js 文件换成同名的文件夹并新建:

index.js 必须，被当作 gulpfile.js 使用

options.js 一些常量

gulp.dev.js 开发环境配置

gulp.prod.js 生产环境配置

除了必须的 index 之外可以随意扩展。如果需要使用 npm 来代替 gulp 命令，只需要在 package.json 中的 script 中定义.

如果你有兴趣，这里同样有一个使用 gulp 构建的 DEMO 供你参考:

关于找一找教程网

本站文章仅代表作者观点，不代表本站立场，所有文章非营利性免费分享。

本站提供了软件编程、网站开发技术、服务器运维、人工智能等等IT技术文章，希望广大程序员努力学习，让我们用科技改变世界。

[前端构建工具: 配置抽离]http://www.zyiz.net/tech/detail-119944.html