Webpack——简单地搭建一个 webpack 项目环境

引言

早期很多时候看 webpack，都是局限于看看基础的配置，例如 entry、ouput、rules 等等，自己着手配置也仅仅只是 less-loader 之类的。所以，作为前端求学者，从今天起，开始探索 webpack 奇妙的世界，有兴趣的同学可以一起坚持学习。

项目准备

初始化一个基础项目

	npm init

创建最基础的几个文件用于后续构建使用

	|-- node_modules            
	|-- index.html                # 用于展示页面
	|-- index.js                  # 页面对应的 JS
	|-- index.css                 # 页面对应的 CSS
	|-- main.js                   # 项目入口文件
	|-- webpack.config.js         # webpack 构建配置
	|-- package.json              
	|-- package-lock.json

安装 webpack、webpack-cli、webpack-dev-server

	npm i -S-D webapck webpack-cli webpack-dev-server

然后，我们需要安装要用到的 loader、plugin

	npm i -S-D css-loader extract-text-webpack-plugin html-webpack-plugin optimize-css-assets-webpack-plugin

初次接触配置的同学，可能对上面的 loader 和 plugin 不太熟悉，我们来一一认识一下：

css-loader 用于构建时解析项目中的 css 文件
extract-text-webpack-plugin 用于将项目的的 css 文件提取出来，成为一个单独的 css 文件
html-weback-plugin 当项目中存在 html 文件时，它会把 html 根据当前的依赖关系构建成一个新的 html 文件，例如在其中 link 打包好的 css 文件、script 打包后的 js 文件等等
optimize-css-assets-webpack-plugin 由于 webpack 4 之后不支持 css-loader 写 url querying 的形式压缩 css，所以需要使用这个插件将 css 进行压缩

配置编写

index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>webpack test demo</title>
</head>
<body>
	<div id="app"></div>	
</body>
</html>

index.css

#app {
	text-align: center;
	color: #faa;
}

index.js

function sayHi(words) {
	document.getElementById('app').innerText = 'Hi ' + words;
}

module.exports = sayHi;

main.js

require('./index.css');
const sayHi = require('./index.js');

sayHi('webpack');

webpack.config.js

const path = require('path')
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
	// 项目入口文件
	entry: './main.js',
	output: {
		// 把所有依赖的模块合输出到 bundle.js 文件
		filename: 'bundle.js',
		// 打包输出文件放到 dist 目录下
		path: path.resolve(__dirname, './dist')
	},
	module: {
		rules: [
			{
				test: /\.css$/,
				use: ExtractTextPlugin.extract({
					fallback: "style-loader",
					use: "css-loader"
				})
			}
		]
	},
	plugins: [
		new ExtractTextPlugin({
			filename: `[name]_[md5:contenthash:hex:8].css`
		}),
		new HtmlWebpackPlugin({
			template: './index.html'
		}),
		new OptimizeCssAssetsPlugin({
			assetNameRegExp: /\.css$/g, // 匹配资源文件名
			cssProcessor: require('cssnano'), // 压缩优化的css处理器
			cssProcessorPluginOptions: { // css 处理器的配置项，具体可查看相对应 css 处理器的文档
				preset: ['default', {discardComments: {removeAll: true}}]
			},
			canPrint: true
		})
	]
}

package.json（主要是编写 npm scripts 来定义指令运行对应 shell 命令）

{
  ...
  "scripts": {
    "start": "webpack-dev-server --watch --hot --devtool source-map",
    "build": "webpack --config webpack.config.js"
  },
  ...
}

在这个 npm scripts 中，start 用于本地开启 devserver 运行项目，build 用于打包项目文件输出到 build。

webpack-dev-server shell 参数：

–watch 代表监听本地文件系统，当文件系统发生变化时会自动刷新项目
–hot 既热重载，当项目中所依赖的文件发生变化时，通过更新变化的部分，而不是刷新页面的形式更新变化
–devtool source-map 则用于当我们需要 debugger 代码的时候，调试项目源码，而不是调试打包后难以阅读的代码

项目启动

在该项目下，打开终端，输入前面在 npm scripts 中定义的指令则可以运行或打包我们的项目，例如：

	npm run start # 启动项目
	npm run build # 打包项目

目前这个项目已经上传到我的 GitHub 上了，有兴趣的同学可以自行去 Clone

WJCHumble

发布了140 篇原创文章 · 获赞 16 · 访问量 4万+

私信关注