为了账号安全,请及时绑定邮箱和手机立即绑定

搭建webpack项目框架

作者:汪娇娇

时间:2018年6月4日

一、说明

随着业务发展和前端人员的增加,搭建一个通用框架以及制定统一规范就成了必然。对于选型这方面,一开始好像就没考虑其他框架,直接选了webpack。webpack的优点就不多说了,可扩展性,强大的npm插件库,说干就干。

基于公司基础以及业务限制,一口吃不成个胖子,没办法做成最理想的状态,也就是一份配置文件,npm build可以直接打包所有项目。也许未来会是这个状态,但目前来看,这种一劳永逸的方案并不是我们公司最合适的方案。一方面公司项目机制并不成熟,老项目也不少,直接打包所有项目很有可能影响老项目;另一方面打包所有项目权限太大,一个人犯错,可能导致公司所有项目都出问题,所以还是自己负责自己的项目就好。现在实现的效果也还不错,简简单单3句命令,就实现了本地、测试和线上环境的区分和打包。命令实例如下(项目名称是testDemo):

npm run start app/testDemo //dev 环境
npm run test app/testDemo //test 环境
npm run build app/testDemo //prod 环境

 

二、规划

现在就说下具体的规划吧,想法其实也很简单:

1、新建2个同级目录,一个是webpack(项目源目录),一个是 build(打包之后的项目的目录);

2、通过运行不同的命令(主要是命令最后面的项目名称不一样),将项目从webpack打包到 build 里,并且webpack和build的目录结构一模一样,比如上面实例中的项目testDemo,它的源目录结构是webpack/app/testDemo,那打包之后的路径就是build/app/testDemo,这样的结构更易于操作和后期维护。

 

三、结构

先来看看webpack的目录结构吧:

node_modules
common
app
store
.gitignore
package.json
webpack.common.js
webpack.dev.js
webpack.prod.js
webpack.test.js
package-lock.json

说明:

  • node_modules:安装好的包。

  • common:公共目录,比如里面可以放公共css、公共插件等。

  • app、store:项目目录,和 build 内的目录保持一致。

  • .gitignore:需要忽略的东西,比如 node_modules 等。

  • package.json:配置文件,如果下载了新的 loader,package.json 文件会有变动。

  • webpack.common.js:webpack 的公共配置文件。

  • webpack.dev.js:本地开发配置文件。

  • webpack.prod.js:线上环境配置文件。

  • webpack.test.js:测试环境配置文件。

  • package-lock.json:npm init 过程中生成的 json 文件,无需关心。

 

四、问题

那么现在面临的就有以下几个问题了:

1、我想要打包哪个文件就可以打包哪个文件,并且打包到指定目录,这个是在哪配置的,应该如何配置?

2、配置文件里都有入口配置和出口配置,并且如果给对应的 html 对应的加上他想要的主 js 文件,我知道这个肯定是动态获取和配置,但具体应该怎么实现?

3、css、js、html、img 是怎么处理的,用到了哪些 loader?

4、我知道的配置文件只有一个,为什么我的会有4个:webpack.common.js、webpack.dev.js、webpack.test.js、webpack.prod.js,为什么要写这么多配置文件,以及是怎么实现的?

5、打包一次就会生成一个目录和一批文件,而且后缀名还不一样,久而久之文件夹岂不是越来越大,怎么解决这个问题,原理又是什么?

6、无论你有没有修改文件,只要打包一次,webpack 就会重新运行一遍,并且生成不同的文件名,有没有什么办法避免这种情况,至少未修改的文件就不会再被打包一遍?

7、如何提取公共模块?比如 index1.js 和 index2.js 都引用了 jQuery,有没有什么办法,可以让打包后的 jQuery 只有一份?

8、本地环境我并不想压缩代码,因为压缩会很慢,测试和线上环境才会去压缩,这个该怎么实现,需要用什么 loader?

9、打包之后的 css 我并不像被压缩在 js 一块,想单独放一个 css 文件夹里,这个可以实现吗,怎么去实现?

10、css 是怎么实现的压缩,和 js 压缩一样吗,需要注意什么?

11、如何给静态资源配置域名地址,而本地不需要,这个怎么实现?

12、package.json 里的 devDependencies 和 dependencies 有什么区别,需要注意什么?

13、.gitignore 的作用,以及如何配置?

下面一一来解答:

1、想要打包哪个文件就可以打包哪个文件,也就是上面提到的 npm start app/testDemo,运行这个命令,就会打包 webpack 下 app/testDemo 这个目录,想要实现这个,只需配置 package.json 和 webpack.common.js 即可:

package.json(不懂的可以去了解下 scripts)

"scripts": {    "watch": "webpack --progress --watch",    "start": "webpack-dev-server --open --config webpack.dev.js --env.project",    "test": "webpack --config webpack.test.js --env.project",    "build": "webpack --config webpack.prod.js --env.project"}

webpack.common.js

module.exports = function (env) {	let dirpath = "";	if (env.project) {
		dirpath = env.project;
	}
}

这样就实现了想要打包哪个文件就可以打包哪个文件,至于打包到哪个文件,就需要自己手动写一些配置了。

主要配置好 output 即可:

const publicPath = '../build/' + dirpath + ''; //打包之后的路径:build,而 dirpath 是上面获取到的值const webpackConfig = {	output: {		filename: 'js/[name].[chunkhash:8].js',		chunkFilename: 'js/[name].[chunkhash:8].js',		path: path.resolve(__dirname, publicPath),		publicPath: "/"
	}
}

 

2、单页面文件比较简单,比如 index.html ,需要引入 index.js 打包后生成的 js 文件,直接 script 标签引入即可,但手动的方法不方便且易出错,怎么实现 index.html 自动引入 index.js 打包后的文件呢?这时候需要用到一个 loader,即:html-webpack-plugin,具体实现方法也很简单:

const HtmlWebpackPlugin = require('html-webpack-plugin');

webpackConfig.entry = {    index: "./js/index.js"}

webpackConfig.plugins = [    new webpack.optimize.CommonsChunkPlugin({ //提取公共模块,比如index1.js和index2.js都引入了jquery,那么jquery就会被当作公共文件被打包进runtime
		name: ['runtime'],		minChunks: Infinity
	}),    new HtmlWebpackPlugin({	    template: 'index.html', //原html文件
	    filename: 'index.html', //index.html 生成后的文件名称
	    chunks: ["index", 'runtime'] //需要的chunks
    })
]

但是如果出现多页面,并且有很多很多项目,不可能每个项目都这样一步一步去配置,这时候就需要动态获取 entry、动态加载 HtmlWebpackPlugin。

//动态获取entry和动态加载HtmlWebpackPlugin//js文件夹下的文件都会加进去并且被相应的html引用,所以不需要加进去的js文件一定不要放在js文件夹下面,可以新建一个文件夹去放,比如common/meta.jsconst entry = {};let fs = require('fs');//无需安装,直接使用let commonEntryAndHtml = function (fileUrl) {	try {		let files = fs.readdirSync(fileUrl);//读取该文件夹
		files.forEach(function (file) {			if (file == "js") {				let jsFile = fs.readdirSync(dirpath + "/" + file);
				jsFile.forEach(function (jsFile) {					let jsFileName = jsFile.split(".")[0];
					entry[jsFileName] = './' + dirpath + '/js/' + jsFile;
				})
			}			if (file.match(/\.(html|php)$/)) {				var htmlFilename = file.split(".")[0];				const plugin = new HtmlWebpackPlugin({					template: '' + dirpath + '/' + file + '', //原html文件
					filename: '' + file + '', //index.html 生成后的 文件名称
					chunks: ["" + htmlFilename + "", 'runtime'] //需要的chunks
				})
				webpackConfig.plugins.push(plugin);
			}
		});
	} catch (e) {		console.log(e);
	}
};
commonEntryAndHtml(dirpath);
webpackConfig.entry = entry; //添加entry

不过动态加载是有要求和前提的,对文件目录结构以及命名有一定的要求的规范,不是你想怎么写都可以打包成功。

我这里的规范以 testDemo 为例:

https://img1.sycdn.imooc.com//5b5f2d8b0001067d01980242.jpg

  • 项目的目录结构和 testDemo保持一致:html文件在最外层,js、css、json、img单独文件夹。

  • js 目录纯粹化:由于 webpack.common.js 里是动态获取 entry 和动态加载 HtmlWebpackPlugin,所以 js 文件夹下的文件都会加进去并且被相应的 html 引用,所以不需要加进去的 js 文件一定不要放在 js 文件夹下面,可以新建一个文件夹去放,比如 common/meta.js。

  • html 和 js 的文件名保持一致:html 文件需要引入的入口 js 文件名必须和 html 的文件名 必须保持一致,比如 index.html 对应的 js 就是 index.js,edit.html 对应的 js 就是 edit.js,这样配置文件才会知道哪个 html 文件需要加载什么 js 文件。

 

3、css、js、html、img 要用到哪些 loader,用过 webpack 的其实都应该比较熟练了,我就直接贴代码吧。

rules: [{	test: /\.(html|php)$/,	loader: 'html-loader' //处理html中的图片}, {	test: /\.(js)$/,	exclude: /(node_modules)/,	use: {		loader: 'babel-loader',		options: {			presets: ['env']
		}
	}
},
{	test: /\.(css|less)$/,	use: ExtractTextPlugin.extract({		fallback: "style-loader",		use: [{			loader: "css-loader"
		},{			loader: "less-loader"
		}]
	})
},
{	test: /\.(png|svg|jpg|gif|svga)$/,	use: [{		loader: 'url-loader?limit=1&name=img/[name].[hash:8].[ext]'
	}]
}
]

需要稍微注意一点的是处理图片的 loader 以及图片的引用方式。

url-loader 中的 limit = 1,代表大小小于 1kb 的图片地址会被转化成 base64 的 url;html-loader 是为了处理 html 中的图片地址;js 中的图片需要通过 require 方式进行引用,直接引用无效。

(1)HTML

<img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="./img/1.jpg">

(2)CSS

.img-box{    background: url("../img/1.jpg") no-repeat;    background-size: 100% 100%;    width: 100px;    height: 100px;
}

(3)JS

const imgUrl = require('./img/1.jpg');
$("body").append(`<img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="${imgUrl}">`);

 

4、配置文件文件分为这4个,其实是为了更好的区分环境(本地、测试、线上)以及维护配置代码。

  • webpack.common.js 是公共配置文件,里面是本地、测试和线上都需要的配置,包括动态入口和出口、处理html、css、js、图片等需要的 loader、提取公共文件、配置别名等;

  • webpack.dev.js 是本地环境配置文件,里面只需要配置 publicPath、监听代码变化自动提交并刷新网页即可;

  • webpack.test.js 是测试环境配置文件,里面也需要配置 publicPath,但测试环境的 publicPath 和本地的 publicPath 不一样,我们约定的是测试环境的域名和路径,测试环境也需要加上清除文件夹的操作,防止每次 webpack 导致文件过大,还有压缩文件的操作,包括 js 和 css 的压缩,同时也会配置 test 的环境变量;

  • webpack.prod.js 就是线上环境配置文件,它和测试环境的配置文件几乎一模一样,唯独 publicPath 是线上环境的域名和路径。

而 npm start app/testDemo、npm test app/testDemo、npm run build app/testDemo 就是根据环境不同,执行不同的配置文件来达到不同的效果。

具体的实现到时候直接贴代码,不同环境的配置文件如何引用公共配置文件可以稍微说一下,主要通过 webpack-merge 。

比如如下是 webpack.dev.js:

const merge = require('webpack-merge');module.exports = function(env){	const common = require('./webpack.common.js')(env);	const commonPath = common.output.path;	const dirpath = commonPath.substring(commonPath.lastIndexOf("build"));	const dirpaths = dirpath.replace(/\\/g, "/");	const publicPath = "./../" + dirpaths + "/"; //开发环境的路径

	return merge(common, {		devtool: 'inline-source-map',		devServer: {			contentBase: publicPath //监听代码变化自动提交并刷新网页
		}
	})
};

 

5、为了解决文件越来越大的问题,只需要每次在打包之前,将原来目录里的文件清除掉即可。

const fs = require('fs');//无需安装,直接使用let emptyDir = function (fileUrl) {	try {		let files = fs.readdirSync(fileUrl);//读取该文件夹
		files.forEach(function (file) {			let stats = fs.statSync(fileUrl + '/' + file);			if (stats.isDirectory()) {
				emptyDir(fileUrl + '/' + file);
			} else {
				fs.unlinkSync(fileUrl + '/' + file);				console.log("删除文件" + fileUrl + '/' + file + "成功");
			}
		});
	} catch (e) {		console.log(e);
	}
};
emptyDir(commonPath);

 

6、为了避免未修改的文件被打包,webpack 本身自带一个插件去处理:

new webpack.HashedModuleIdsPlugin()

 

7、提取公共模块,webpack 也自带了一个插件去处理:

new webpack.optimize.CommonsChunkPlugin({ //最小化入口 chunk
	name: ['runtime'],	minChunks: Infinity})

 

8、本地不需要压缩,测试和线上环境才去压缩,之前的环境划分就派上了很好的用场了,只需要在 webpack.test.js 和 webpack.prod.js 中配置压缩即可。至于用到什么 loader,js 一般用的是 uglifyjs-webpack-plugin,css 用的是 optimize-css-assets-webpack-plugin。配置如下:

uglify 里面的配置可不写,我这里主要写的是 ie8 的兼容,sourceMap 也可设置为 true,这样利于调试。

const UglifyJSPlugin = require('uglifyjs-webpack-plugin');new UglifyJSPlugin({	output: {		quote_keys: true,		keep_quoted_props: true,		screw_ie8: false
	},	mangleProperties: {		screw_ie8: false
	},	compress: {		properties: false,		screw_ie8: false
	},	mangle: {		screw_ie8: false,		except: ['e']
	},	sourceMap: false})

 optimize-css-assets-webpack-plugin 能使 css 最小化,如果不做处理的话,压缩后会导致一些兼容的前缀丢失,所以里面添加了一些配置,方式压缩过狠。

const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');new OptimizeCssAssetsPlugin({	assetNameRegExp: /\.css\.*(?!.*map)/g, //注意不要写成 /\.css$/g
	cssProcessor: require('cssnano'),	cssProcessorOptions: {		discardComments: { removeAll: true },		// cssnano 集成了autoprefixer的功能
		// 会使用到autoprefixer进行无关前缀的清理
		// 关闭autoprefixer功能
		// 使用postcss的autoprefixer功能
		autoprefixer: false
	},	canPrint: true})

 

9、如果不做任何处理的话,打包后的 css 会被压缩在 js 之中,第一不太美观,第二会导致 js 文件过大,所以有必要将 css 分离出来,这时候要用到一个 extract-text-webpack-plugin 的插件。配置如下:

const ExtractTextPlugin = require('extract-text-webpack-plugin');//loader{	test: /\.(css|less)$/,	use: ExtractTextPlugin.extract({		fallback: "style-loader",		use: [{			loader: "css-loader"
		},{			loader: "less-loader"
		}]
	})
}//pluginnew ExtractTextPlugin('css/[name].[contenthash:8].css')

 

10、前面已经说过了,css 压缩采用  optimize-css-assets-webpack-plugin 插件,js 压缩采用的是 uglify,要注意的就是如果不做任何配置,css 里有些做兼容的前缀,比如 -webkit- 等就会被当作没用的东西被压缩掉,再加一些配置就可以了。

 

11、给静态资源配置不同的地址,无论是本地还是测试还是线上,都是通过 publicPath 进行实现的。

本地:

const common = require('./webpack.common.js')(env);const commonPath = common.output.path;const dirpath = commonPath.substring(commonPath.lastIndexOf("build"));const dirpaths = dirpath.replace(/\\/g, "/");const publicPath = "./../" + dirpaths + "/"; //开发环境的路径

测试(前半部分代码和本地保持一致):

const publicPath = "https://test.jojo.com/" + dirpaths + "/"; //测试环境js和css的路径

线上(前半部分代码和本地保持一致):

const publicPath = "https://www.jojo.com/" + dirpaths + "/"; //线上环境js和css的路径

 

12、以前一直在纠结一个npm安装的包依赖管理的问题。是这样的:我们在使用 npm install 安装模块或插件的时候,有两种命令把他们写入到 package.json 文件里面去,他们是:--save-dev 或 --save。

首先需要说明的是Dependencies一词的中文意思是依赖和附属的意思,而dev则是 develop(开发)的简写。

所以它们的区别在 package.json 文件里面体现出来的就是,使用 --save-dev 安装的 插件,被写入到 devDependencies 域里面去,而使用 --save 安装的插件,则是被写入到 dependencies 区块里面去。

那 package.json 文件里面的 devDependencies  和 dependencies 对象有什么区别呢?

devDependencies  里面的插件只用于开发环境,不用于生产环境,而 dependencies  是需要发布到生产环境的。

比如我们写一个项目要依赖于jQuery,没有这个包的依赖运行就会报错,这时候就把这个依赖写入dependencies ;

而我们使用的一些构建工具比如glup、webpack这些只是在开发中使用的包,上线以后就和他们没关系了,所以将它写入devDependencies。

 

13、.gitignore 就是将不想上传的文件或文件夹上传到仓库里,比如 npm install 生成的巨大无比的 node_modules。使用方法参考:https://git-scm.com/docs/gitignore

 

五、代码

差不多就介绍到这吧,下面直接把代码贴出来,可以直接吧把 package.json 引到自己的文件中,然后 npm install 直接安装相关依赖。当然也可以自己 npm init 后一个一个下载安装,自己喜欢就好。

补充一些相关命令:

  • 安装淘宝镜像:

npm install -g cnpm --registry=https://registry.npm.taobao.org
  • 删除 node_modules :

npm uninstall
  • 安装loader(比如安装 html-loader 和 vue):

cnpm install --save-dev html-loader
cnpm install --save vue

 

package.json

{  "name": "webpack",  "version": "1.0.0",  "description": "",  "main": "index.js",  "scripts": {    "watch": "webpack --progress --watch",    "start": "webpack-dev-server --open --config webpack.dev.js --env.project",    "test": "webpack --config webpack.test.js --env.project",    "build": "webpack --config webpack.prod.js --env.project"
  },  "keywords": [],  "author": "",  "license": "ISC",  "devDependencies": {    "autoprefixer": "^8.6.5",    "babel": "^6.23.0",    "babel-core": "^6.26.0",    "babel-loader": "^7.1.2",    "babel-plugin-transform-es3-property-literals": "^6.22.0",    "babel-preset-env": "^1.6.0",    "babel-preset-es2015": "^6.24.1",    "babel-preset-stage-0": "^6.24.1",    "babel-runtime": "^6.26.0",    "brace-expansion": "^1.1.8",    "chokidar": "^2.0.0",    "clean-webpack-plugin": "^0.1.17",    "compression": "^1.7.1",    "connect-history-api-fallback": "^1.5.0",    "css-loader": "^0.28.7",    "del": "^3.0.0",    "emilia": "^0.1.1",    "enhanced-resolve": "^4.0.0-beta.4",    "es3ify-loader": "^0.2.0",    "express": "^4.16.2",    "extract-text-webpack-plugin": "^3.0.1",    "fastclick": "^1.0.6",    "file-loader": "^0.11.2",    "fs.realpath": "^1.0.0",    "html-loader": "^0.5.5",    "html-webpack-plugin": "^2.30.1",    "html-withimg-loader": "^0.1.16",    "http-proxy-middleware": "^0.17.4",    "install": "^0.10.1",    "internal-ip": "^3.0.1",    "jquery": "^1.11.3",    "jquery-lazyload": "^1.9.7",    "lazyload": "^2.0.0-beta.2",    "lazysizes": "^4.0.0-rc4",    "less": "^2.7.3",    "less-loader": "^4.0.5",    "markdown-loader": "^3.0.0",    "npm": "^5.4.2",    "opn": "^5.2.0",    "optimize-css-assets-webpack-plugin": "^3.2.0",    "php-loader": "^0.2.0",    "php-parser": "^3.0.0-alpha2",    "post-loader": "^2.0.0",    "postcss-loader": "^2.1.6",    "selfsigned": "^1.10.1",    "source-list-map": "^2.0.0",    "style-loader": "^0.18.2",    "tapable": "^1.0.0-beta.5",    "uglifyjs-webpack-plugin": "^0.4.6",    "url-loader": "^1.0.1",    "utils": "^0.3.1",    "webpack": "^3.10.0",    "webpack-dev-server": "^2.9.1",    "webpack-merge": "^4.1.0",    "webpack-php-loader": "^0.5.0",    "webpack-remove-hashed-files": "^1.2.1",    "webpack-spritesmith": "^0.3.3",    "zepto": "^1.2.0"
  },  "dependencies": {    "svgaplayerweb": "^2.1.0",    "vue": "^2.5.16",    "vue-loader": "^15.2.4",    "vue-resource": "^1.5.1",    "vue-router": "^3.0.1",    "vue-template-compiler": "^2.5.16"
  }
}

 

webpack.common.js

const path = require('path');const HtmlWebpackPlugin = require('html-webpack-plugin');const ExtractTextPlugin = require('extract-text-webpack-plugin');const webpack = require('webpack');module.exports = function (env) {	let dirpath = "";	if (env.project) {
		dirpath = env.project;
	}	const publicPath = '../build/' + dirpath + ''; //打包之后的路径

	const webpackConfig = {		output: {			filename: 'js/[name].[chunkhash:8].js',			chunkFilename: 'js/[name].[chunkhash:8].js',			path: path.resolve(__dirname, publicPath),			publicPath: "/"
		},		resolve: {			alias: {				'@base': path.resolve(__dirname, "common")
			}
		},		module: {			rules: [{				test: /\.(html|php)$/,				loader: 'html-loader' //处理图片
			}, {				test: /\.(js)$/,				exclude: /(node_modules)/,				use: {					loader: 'babel-loader',					options: {						presets: ['env']
					}
				}
			},
			{				test: /\.(css|less)$/,				use: ExtractTextPlugin.extract({					fallback: "style-loader",					use: [{						loader: "css-loader"
					},{						loader: "less-loader"
					}]
				})
			},
			{				test: /\.(png|svg|jpg|gif|svga)$/,				use: [{					loader: 'url-loader?limit=1&name=img/[name].[hash:8].[ext]'
				}]
			}
			]
		},		plugins: [			new webpack.ProvidePlugin({				$: 'jquery',				Vue: ['vue/dist/vue.min.js'],				FastClick: 'fastclick',				marked: 'marked',				SVGA: "svgaplayerweb"
			}),			new ExtractTextPlugin('css/[name].[contenthash:8].css'),			new webpack.HashedModuleIdsPlugin(),			new webpack.optimize.CommonsChunkPlugin({ //提取公共模块,比如index1.js和index2.js都引入了jquery,那么jquery就会被当作公共文件被打包进runtime
				name: ['runtime'],				minChunks: Infinity
			})

		]
	};	//动态获取entry和动态加载HtmlWebpackPlugin
	//js文件夹下的文件都会加进去并且被相应的html引用,所以不需要加进去的js文件一定不要放在js文件夹下面,可以新建一个文件夹去放,比如common/meta.js
	const entry = {};	let fs = require('fs');//无需安装,直接使用
	let emptyDir = function (fileUrl) {		try {			let files = fs.readdirSync(fileUrl);//读取该文件夹
			files.forEach(function (file) {				if (file == "js") {					let jsFile = fs.readdirSync(dirpath + "/" + file);
					jsFile.forEach(function (jsFile) {						let jsFileName = jsFile.split(".")[0];
						entry[jsFileName] = './' + dirpath + '/js/' + jsFile;
					})
				}				if (file.match(/\.(html|php)$/)) {					var htmlFilename = file.split(".")[0];					const plugin = new HtmlWebpackPlugin({						template: '' + dirpath + '/' + file + '', //原html文件
						filename: '' + file + '', //index.html 生成后的 文件名称
						chunks: ["" + htmlFilename + "", 'runtime'] //需要的chunks
					})
					webpackConfig.plugins.push(plugin);
				}
			});
		} catch (e) {			console.log(e);
		}
	};
	emptyDir(dirpath);
	webpackConfig.entry = entry; //添加entry
	return webpackConfig;
};

 

webpack.dev.js

const merge = require('webpack-merge');module.exports = function(env){	const common = require('./webpack.common.js')(env);	const commonPath = common.output.path;	const dirpath = commonPath.substring(commonPath.lastIndexOf("build"));	const dirpaths = dirpath.replace(/\\/g, "/");	const publicPath = "./../" + dirpaths + "/"; //开发环境的路径

	return merge(common, {		devtool: 'inline-source-map',		devServer: {			contentBase: publicPath //监听代码变化自动提交并刷新网页
		}
	})
};

 

webpack.test.js

const path = require('path');const webpack = require('webpack');const merge = require('webpack-merge');const UglifyJSPlugin = require('uglifyjs-webpack-plugin');const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin'); //压缩cssconst fs = require('fs');//无需安装,直接使用module.exports = function (env) {	const common = require('./webpack.common.js')(env);	const commonPath = common.output.path;	const dirpath = commonPath.substring(commonPath.lastIndexOf("build"));	const dirpathss = dirpaths.replace(/\\/g, "/");	const publicPath = "https://test.jojo.com/" + dirpathss + "/"; //测试环境js和css的路径

	//清除文件夹,防止每次webpack导致文件过大
	let emptyDir = function (fileUrl) {		try {			let files = fs.readdirSync(fileUrl);//读取该文件夹
			files.forEach(function (file) {				let stats = fs.statSync(fileUrl + '/' + file);				if (stats.isDirectory()) {
					emptyDir(fileUrl + '/' + file);
				} else {
					fs.unlinkSync(fileUrl + '/' + file);					console.log("删除文件" + fileUrl + '/' + file + "成功");
				}
			});
		} catch (e) {			console.log(e);
		}
	};
	emptyDir(commonPath);	return merge(common, {		output: {			publicPath: publicPath
		},		plugins: [			new UglifyJSPlugin({				output: {					quote_keys: true,					keep_quoted_props: true,					screw_ie8: false
				},				mangleProperties: {					screw_ie8: false
				},				compress: {					properties: false,					screw_ie8: false
				},				mangle: {					screw_ie8: false,					except: ['e']
				},				sourceMap: false
			}),			//项目是用了autoprefix自动添加前缀,这样压缩,会导致添加的前缀丢失
			new OptimizeCssAssetsPlugin({ //https://zhuanlan.zhihu.com/p/37251575
				assetNameRegExp: /\.css\.*(?!.*map)/g, //注意不要写成 /\.css$/g
				cssProcessor: require('cssnano'),				cssProcessorOptions: {					discardComments: { removeAll: true },					// cssnano 集成了autoprefixer的功能
					// 会使用到autoprefixer进行无关前缀的清理
					// 关闭autoprefixer功能
					// 使用postcss的autoprefixer功能
					autoprefixer: false
				},				canPrint: true
			}),			new webpack.DefinePlugin({				'process.env': {					'NODE_ENV': JSON.stringify('production')
				}
			})
		]
	})
};

 

webpack.prod.js

const merge = require('webpack-merge');module.exports = function(env){	const test = require('./webpack.test.js')(env);	const publicPath = test.output.publicPath.replace(/test.jojo.com/, "www.jojo.com"); //线上环境js和css的路径
	return merge(test, {		output: {			publicPath: publicPath
		}
	})
};

原文链接:https://my.oschina.net/jojo76/blog/1858430

点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消