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"
},
}
至此一个粗略的简单项目就运行起来了,静待下期完善。