文章目录
本文从代码压缩、代码拆分、样式分离等三个方面对生产环境的代码进行了优化。只是最简单的一些配置,如果真正运用到项目中,还需要根据项目添加更多配置。
前言
本文讲述的是如何对生产环境下的代码进行压缩,如果还不是太了解 Webpack 的朋友,可以先看一下我的上一篇文章:从零开始搭建一个 Webpack 开发环境配置(附 Demo)
本文项目代码位置:源码地址
环境搭建
项目结构
首先编写一个项目,初始化 npm,然后 在本地安装 webpack,接着安装 webpack-cli(此工具用于在命令行中运行 webpack):
$ mkdir webpack-prod-demo
$ cd webpack-prod-demo
$ npm init -y
$ npm install webpack webpack-cli --save-dev
project
webpack-prod-demo
|- package.json
|- /public
|- index.html
|- /src
|- index.js
|- index.css
pubic/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Webpack 生产环境配置</title>
</head>
<body>
</body>
</html>
index.js
import './index.css';
function component() {
var element = document.createElement('div');
element.innerHTML = 'Hello World';
return element;
}
document.body.appendChild(component());
index.css
div {
color: blue;
text-align: center;
}
package.json
{
"name": "webpack-prod-demo",
"version": "1.0.0",
"description": "",
"private": true,
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --config webpack.config.js"
},
"keywords": [],
"author": "",
"license": "ISC"
}
配置 webpack.config.js 文件
在根目录下新建 webpack.config.js 文件,并进行基本配置
安装插件
# 安装 babel-loader
$ npm install babel-core babel-loader@7 --save-dev
# 安装 babel presets
$ npm install babel-preset-env babel-preset-stage-0 --save-dev
# 安装 babel plugins
$ npm install babel-plugin-transform-class-properties babel-plugin-transform-runtime babel-runtime --save-dev
# 安装其余所需 loader
$ npm install css-loader style-loader file-loader csv-loader xml-loader html-loader markdown-loader --save-dev
# 安装 webpack 插件
$ npm install clean-webpack-plugin html-webpack-plugin friendly-errors-webpack-plugin --save-dev
配置 webpack.config.js:
webpack.config.js
const path = require('path');
const HTMLWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');