webpack4从零开始项目构建（entry，output，module，plugins, devServer）介绍和使用

webpack作为我们项目开发中广发应用的一款模块打包工具，如果你对它还不熟悉的话，如果你还停留在npm run dev的话，接下来就跟我一起来走近webpack，了解它，拥抱它，本文介绍的是webpack4的版本。

1. webpack的安装

全局安装

// webpack-cli 可以使webpack能够被命令运行
npm install webpack webpack-cli -g
// 打包js
webpack  xxx.js

局部安装（全局安装可能会使一些webpack3的项目无法运行，这里推荐局部安装）

// 1. 生成npm管理的项目
npm init -y
// 2. 安装webpack webpack-cli
npm install webpack webpack-cli -D
// 运行webpack， webacpk已经被安装到局部，使用npx命令
npx webpack xxx.js

2. webpack的打包entry，output

webpack默认的基础配置文件是webpack.config.js,我们可以对这个文件做改造，从而达到我们的要求，我们先实现一个最简单的webpack打包配置

const path = require("path");
module.exports = {
    // entry: './src/index.js', // 打包的入口文件
    entry: {
    	main: './src/index.js',  // 打包的入口文件
    }
    output: {
    	// publicPath: 'http://cdn.yumang.com.cn' // 静态资源cdn引入
        filename: '[name].js', // 输入文件的名字
        path: path.resolve(__dirname, 'dist') // 输出文件目录
    }
}

至此一个简单的打包配置就完成了，但这远远还不够，我们接着深入吧

3. webpack-loaders

在我们的webpack中，webpack默认只能打包js文件，对于其他文件是无法解析的，此
时我们就要引出它的另一大核心概念loaders，接下来我们就用代码看看怎么解析css，scss图片吧，首先在wepack.config.js 中新增module配置项，里面可以配置rules是个数组。(loader 都是需要npm安装的)

打包images url-loader file-loader

module: {
	rules: [
			 {
                test: /\.(png|jpg|gif)$/,
                use: [
                    {
                        loader: 'url-loader', // url-loader依赖file-loader 要一起安装
                        options: {
                            name: '[name]_[hash].[ext]', // 输入图片名称格式为， 图片名称+ hash值 + 文件后缀
                            outputPath: 'images/', // 图片会被打包到dist目录的images目录下
                            limit: 2048 // 文件小于2kb会以base64形式插入js中，并在页面中显示，大于2Kb会打包成图片
                        }
                    }
                ]
            }
        ]
    }

打包css-scss在rules数组新增一项匹配规则

/**
在webpack中；loader的执行顺序是从下往上，从右往左的，webpack解析scss，先用sass-loader解析scss文件成css文件，然后交给css-loader解析css。最后生成style嵌入head标签中。注意sass-loader依赖node-sass要一起安装
**/
{
	test: /\.scss$/,
	use: [
			'style-loader', 
			{
				loader: 'css-loader',
                options: {
                       importLoaders: 1  // 这个配置是当一个scss文件里面引入了一个scss文件回回过头从新往下执行一遍loader
                  }
             },
             'sass-loader', 
         ]
 },
 {
	test: /\.css$/,
	use: [
			'style-loader', 
			'css-loader'
         ]
 }

4. webpack-plugins

至此， css，js ，images都打包了，可是它还没有引入我们的页面呀，怎么引入页面呢，接下来就讲到plugins。他们都需要被安装（npm install）。
在我们的配置文件中新增一项plugins，它是个数组

// html-webpack-plugin 它会帮助我们在dist目录新建一个html文件，然后把打包的资源都引入，当然它也可以指定html文件引入js
var HtmlWebpackPlugin  = require("html-webpack-plugin");
// clean-webpack-plugin 它会在每次打包时清空dist目录，然后重新生成
var {CleanWebpackPlugin} = require("clean-webpack-plugin");
module.export = 	{
	plugins: [
		new  HtmlWebpackPlugin({template: './src/index.html'}),
		new CleanWebpackPlugin ()
	]
}

5. webpack-dev-server

我们项目的雏形已经建立了，但是老铁们有没有发现我们每一次改变代码，都需要重新打包，虽然webpack可以用–watch参数来帮我们监听文件变化自动打包，但是我们前端开发中例如ajax请求，需要在服务器的状态下请求，webpack-dev-server出现了，它可以监听我们代码变动自动打包，自动刷新页面，启动本地服务等等，美滋滋。接下来我们简单讲解下他的使用。

安装

npm install webpack-dev-server -D

webpack.config.js配置项新增

{
	devServer: {
	        contentBase: path.join(__dirname, "dist"), // 指定服务映射目录
	        compress: true,
	        port: 9000 // 启动服务端口
	 },
}

package.json配置script脚本，我们就可以npm run dev启动项目了，是不是很熟悉啊

// package.json
{
 "scripts": {
    	"dev": "webpack-dev-server"
  },
}

至此一个粗略的简单项目就运行起来了，静待下期完善。

yumang111

原创文章 17 获赞 65 访问量 6476

关注私信