webpack 4 简单介绍

webpack是什么？

webpack是一个现代JavaScript应用程序的静态模块打包器（module bundler）。

为什么要使用webpack呢？

随着web技术的发展，前端开发不再仅仅是静态网页的开发，前端代码的逻辑和交互越来越复杂。

回想一下最初我们如何开发一个页面，切图、写样式、用JQuery写一写JS效果，页面开发完就能直接在浏览器里查看。我们手动编译（比如用koala编译less），手动压缩（比如用compress压缩css），手动对比代码（比如用compare对比代码）。

而现在前端开发早已进入工程化和自动化，前端自动化构建工具可以帮我们完成这些重复且繁琐的工作。webpack就是前端构建工具的优秀代表。通过webpack我们可以方便快捷地处理包括JS、CSS、png、webfonts在内的资源文件。

webpack能做哪些事情呢？

• 代码编译：把ES6转成ES5，把less编译成css等
• 文件优化：压缩HTML、CSS、JavaScript代码，压缩合并图片等
• 模块合并：把多个文件合成一个文件，减少http请求
• 自动刷新：监听本地源代码的变化，自动重新构建，刷新浏览器
• 代码校验：在代码被提交到仓库前校验代码是否符合规范
• 自动发布：自动构建出线上发布代码并传输给发布系统

webpack如何实现这些功能呢？

webpack的核心概念：

• 入口（entry）
• 输出（output）
• loader
• 插件（plugins）

入口（entry）：

指示webpack应该使用哪个模块，来做为构建其内部依赖图的开始。Webpack从入口开始递归解析出所有依赖的模块。

输出（output）：

告诉webpack在哪里输出它所创建的bundles，以及如何命名这些文件，默认值是 ./dist。

备注：webpack配置是标准的Node.js CommonJS模块。path是Node.js 的核心模块，用于操作文件路径。

loader：

loader让webpack能够去处理那些非JavaScript文件（webpack自身只理解JavaScript）。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行处理。

在webpack的配置中loader有两个目标：

• test 属性：用于标识出应该被对应的loader进行转换的某个或某些文件。
• use 属性：表示进行转换时，应该使用哪个loader。

插件（plugins）：

loader被用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。

想要使用一个插件，你只需要require()它，然后把它添加到 plugins 数组中。

配置webpack

一、安装webpack

全局安装 webpack 和 webpack-cli

npm i webpack webpack-cli -g

新建项目文件夹，初始化 webpack

npm init -y  #生成package.json文件，默认所有配置
npm i webpack webpack-cli -D  #在devDependencies环境中安装

备注：webpack4.0中webpack和webpack-cli已经拆分，需要单独安装

 

二、配置webpack

根目录下新建webpack.config.js文件（也可是使用其他文件名，但需要额外配置）。

设置入口和输出

const path = require('path')

const webpack = require('webpack')

module.exports = {

entry: './src/index.js',

output: {

path: path.resolve(__dirname, 'dist'),

filename: '[name].js'

}

}

三、常见文件的配置

Html在webpack中的配置

在开发环境中安装插件

npm i html-webpack-plugin

在webpack.config.js中引入插件

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

在module.exports中配置插件

plugins: [

new HtmlWebpackPlugin({

file: 'index.html',

template: 'src/index.html'

})

]

CSS在webpack中的配置

在开发环境中安装loader

npm i css-loader less less-loader style-loader

在开发环境中安装插件

npm i mini-css-extract-plugin -D

在webpack.config.js中引入插件

const MiniCssExtractPlugin = require('mini-css-extract-plugin')

在module.exports中配置loader

module: {

rules: [{

test: /\.(css|less|sass|sty)$/,

use: [

MiniCssExtractPlugin.loader,

"css-loader",

"less-loader"

]

}]

}

在module.exports中配置插件

plugins: [

new MiniCssExtractPlugin({

filename: '[name].[chunkhash:8].css',

chunkFilename: '[id].css'

})

]

JS在webpack中的配置

根目录下新建.babelrc文件，简单配置下

{ "presets": ["env"] }

在开发环境中安装babel

npm i babel-core babel-loader babel-preset-env -D

在webpack.config.js文件里配置babel

module: {

rules: [{

test: /\.js$/,

include: [

path.resolve(__dirname, 'src')

],

use: 'babel-loader'

}]

}

图片资源在webpack中的配置

在开发环境中安装loader

npm i file-loader -D

在module.exports中配置loader

module: {

rules: [{

test: /\.(png|jpg|gif)$/,

use: [{

loader: 'file-loader'

}]

}]

}

别名@在webpack中的配置

在module.exports中配置

resolve: {

extensions: [".js", ".json", ".jsx", ".less", ".css"],

alias: {

utils: path.resolve(__dirname, 'src/utils')

}

}

npm run build

在package.json中定义脚本

"scripts": {

"build": "webpack --mode production"

}

执行npm run build脚本会启动webpack打包文件

npm run start

在package.json中定义脚本

"scripts": {

"start": "webpack-dev-server --mode development"

}

在module.exports中配置dev-server

devServer: {

port: '8080',

before(app) {

app.get('/api/test.json', (req, res) => {

res.json({

code: 200,

message: 'Hello World'

})

})

}

}

npm run start 在webpack里创建了一个node进程。

vue提供的webpack模板

vue-cli 是 Vue.js 的脚手架工具

安装

npm install -g vue-cli

用法

vue init <template-name> <project-name>

例如：vue init webpack my-project

vue官方示例：配置一个vue+webpack项目

第一步：全局安装vue-cli

npm install -g vue-cli

第二步：初始化一个基于webpack模块的新项目

vue init webpack my-project

第三步：安装依赖

cd my-project #进入新项目文件夹

npm install #安装依赖

第四部：启动项目

npm run dev

参考资料：

https://www.webpackjs.com/concepts/

https://www.webpackjs.com/guides/getting-started/