webpack4.0
2018-12-01 本文已影响0人
94very
webpack 是具有打包，转化以及优化的工具，而 webpack4.x 相比较 webpack3.x 有了较大的改变，故在此写下一篇文章用于记录与学习。
1. webpack安装
webpack 是基于 node 使用的所以请先安装 node(npm 也会随node一并下载下来)，下载完毕之后使用下图指令
[图片上传中...(webpack.PNG-5cfd88-1543608997803-0)]
确认是否下载完成。
webpack 官网https://webpack.js.org
node 官网https://nodejs.org/zh-cn/
webpack 4.0 安装命令如下图(npm，cnpm都可以)
webpack.PNG
该方法为全局安装，用一下命令查看是否安装成功
success.PNG
若未成功请使用局部安装如下
再次使用上面的命令验证是否安装成功
2. 简单配置
在项目中先生成项目文件如下
npm init.PNG
再在项目中生成 webpack.config.js (webpack的配置文件)，建立 src 文件夹(未打包之前的文件夹)，dist 文件夹是打包之后生成的文件夹，node_modules 是存放各种插件即中间件，package.json 写清所下的依赖，基本目录如下
目录.PNG
下面是 webpack.config.js 中的基本配置，如下图
配置.PNG
webpack4.0，中的零配置时，默认入口文件为 src/index.js，默认出口文件为 dist/main.js
entry 入口文件
output 出口文件
loader 转化器
plugins 插件
devServer 开发服务器
mode 模式
webpack.config.js 文件配置好后，只需在 cmd 中输入 webpack 便可打包，默认打包的文件是压缩过后的，这便是 mode 模式
mode 分为两种模式，分别是 development(开发模式) 和 production(上线模式)，可在 cmd 中如下所写(开发模式)
cmd.PNG
也可在 package.json 中事先配置好，如下
cmd-one.PNG
运行时 cmd 中输入如下
build.PNG
出口与入口的设置
1-1-3.PNG
1.entry 入口
可以同时配置多个入口，路径使用相对路径
2.output 出口
path 路径使用绝对路径，可以使用 resolve 或者 join 进行合成，__dirname 为当前文件夹的路径，
filename 打包过后的 js 文件名
打包过后生成的文件夹如下
1-1-3.PNG
html-webpack-plugin
打包时的一些操作
1. 安装
npm install html-webpack-plugin -D
2.依赖 webpack 运行
需要本地安装 webpack，因为 webpack4.0 中将一些功能放入了 webpack-cli 中，所以也需要本地安装 webpack-cli
npm install webpack webpack-cli -D
3.配置
4.使用
引入 new html({})
webpack.config.js 中配置如下
1-1-1.PNG
chunks 打包文件的名称，是一个数组，即可以同时将多个 js 文件打包在同一个 html 文件中
hash 是否对引入的静态资源进行编译进行，如下
1-1-2.PNG
title 一般用于网页的<title>标签中
filename 打包之后生成的 html 文件的名称
template 打包文件的 html 模板
更多配置请到 npm 官网查看
clean-webpack-plugin
清除之前生成的包
1.安装
npm install clean-webpack-plugin -D
2.使用
引入 new clean([])
1-1-4.PNG
webpack-dev-server
启用服务器
1. 安装
npm install webpack-dev-plugin -D
2. 使用
无需用变量引入
配置如下
1-1-5.PNG
open 是在 cmd 中运行打包之后页面立即打开
hot 是在文件保存即在页面更新
打包过后的项目目录如下
1-1-6.PNG
less/scss 等是浏览器不支持的，所以需要用 loaders(转化器，加载器) 进行转化
style-loader ，css-loader
1. 安装
npm install style-loader css-loader -D
2. 使用
在 webpack.config.js 中对 module 进行配置，不用用变量引入
1-1-7.PNG
mode production(上线环境即对打包文件进行压缩)
1. 在 webpack4.0 之后
可以在 webpack.config.js 中设置，也可以在 package.json 中设置，或者在 cmd 中输入命令时加上
2. 在 webpack4.0 之前
使用 uglify 插件
1. 安装
npm install uglifyjs-webpack-plugin -D
2. 使用
1-1-8.PNG
url-loader，file-loader
1. 安装
npm install url-loader file-loader -D
2. 使用
无需在 webpack.config.js 中用变量引入，在 webpack.config.js 中的配置如下
1-1-9.PNG
less，less-loader
1. 安装
npm install less less-loader -D
2. 使用，在 webpack.config.js 中的配置
1. 在 module 中进行配置
1-1-10.PNG
2. 在 js 文件中通过 import from 将 less 文件引入
node-sass，sass-loader
1. 安装
npm install node-sass sass-loader -D
2. 使用，在 webpack.config.js 中的配置如下
1. 在 module 中进行配置
1-1-11.PNG
2. 在 js 文件中通过 import from 将 sass 文件引入
css，less，sass 文件的分离
extract-text-webpack-plugin
1. 安装
npm install extract-text-webpack-plugin -D
2. 使用，在 webpack.config.js 中的配置如下
1-1-12.PNG
3. 问题
1. 图片路径的问题
1-1-13.PNG
2. extract-text-webpack-plugin 版本问题
1-1-14.PNG
postcss-loader，autoprefixer
处理 css 文件因为浏览器的不同而产生的前缀(webkit，moz，ms，o)，自动添加前缀
1. 安装
npm install postcss-loader autoprefixer -D
2. 使用
1. 在项目目录中首先生成一个 postcss.config.js 配置文件，配置如下
1-1-15.PNG
2. 在 webpack.config.js 文件中 module 下面的 rules 中的配置如下
1-1-16.PNG
purify-css，purifycss-webpack
消除冗余的 css 文件
1. 安装
npm install purify-css purifycss-webpack -D
2. 使用，在 webpack.config.js 文件中 plugins 中配置如下
1-1-17.PNG
3. 需要引入 glob 扫描模块
npm install glob -D
babel
babel 用来编译 js，jsx，ESnext(浏览器无法转化的 js 代码)
1. 安装(babel-loader，babel-core，babel-preset-env)
npm install babel-loader babel-core babel-preset-env -D
2. 使用
1. 在 webpack.config.js 中 modules 中的 rules 的配置如下
第一种方式，这种方式需要配置 .babelrc 文件
新建 .babelrc 配置文件，配置如下
1-1-20.PNG
第二种方式，这种方式不需要配置 .babelrc 文件
1-1-19.PNG
babel-preset-react，react，react-dom
将 jsx 语法转化为浏览器支持的语法
1. 安装
npm install babel-preset-react react react-dom -D
2. 使用
1. 因为之前配置 js 时已加上 jsx 所以 webpack.config.js 无需再配置
2. 在 .babelrc 中加上 react 如下
1-1-21.PNG
3. 在写了 jsx 的 js 文件中引入 react
通过 import React from 'react' 引入
copy-webpack-plugin
静态资源输出，将 src 中的说明，图片等不需要打包的文件直接 copy 到 dist 文件夹中
1. 安装
npm install copy-webpack-plugin -D
2. 使用，在 webpack.config.js 中配置如下
1-1-22.PNG
引入第三方库
1. 直接使用 npm 下载库(bootstrap，jquery等)
不建议使用，因为会直接会将整个库引入打包文件中，不管是否使用了
2. ProvidePlugin
使用到库时才会打包
是 webpack 中的一个包，只要安装了 webpack 就可以使用
在 webpack.config.js 文件中的 plugins 中的配置如下
1-1-23.PNG
optimzation
将库分开打包并以不同的 srcipt 标签写入 html 文件中
使用，是 webpack 中的一个包不需要 npm 安装，在 webpack.config.js 文件中的配置如下
1-1-24.PNG
下载的包都在 package.json 中有记录如下
1-1-25.PNG
项目文件夹中也会有 node_modules 本地安装的包都在改文件夹下
生成的被打包文件夹 src 目录如下
1-1-26.PNG
生成的配置文件目录如下
1-1-27.PNG
打包过后的 dist 文件夹目录如下
1-1-28.PNG
webpack.config.js 配置文件
const path = require("path");
const html = require("html-webpack-plugin");
const webpack = require("webpack");
const clean = require("clean-webpack-plugin");
const eXtract = require("extract-text-webpack-plugin");
const purify = require("purifycss-webpack")
const glob = require("glob");
const rules = require("./webpack.rules.js");
const jsonConfig = require("./webpack.config.json");
const copyWebpackPlugin = require("copy-webpack-plugin");
// 打印路径
console.log('***************', path.join(__dirname, 'src/index.html'));
console.log('---------------', path.resolve(__dirname, 'src/index.html'));
console.log(jsonConfig);
module.exports = {
entry: {
index: './src/index.js',
jquery: 'jquery'
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].bundle.js'
},
devServer: {
contentBase: path.resolve(__dirname, 'dist'),
host: jsonConfig.host,
port: jsonConfig.port,
open: true,
hot: true
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new html({
title: '牧师',
template: './src/index.html',
hash: true
}),
// css 文件打包出去的文件路径，即将在 dist 文件夹下生成一个 css 文件夹，文件夹中存入 index.css 文件
new eXtract('css/index.css'),
new purify({
// 扫描同步下的 html 文件，purifycss 会根据 html 文件中的 css 将冗余的 css 文件删除
// sync 同步配置
paths: glob.sync(path.join(__dirname, 'src/*.html'))
}),
// 静态资源输出
new copyWebpackPlugin([{
// 要 copy 的文件在哪里
from: path.resolve(__dirname, 'src/asserts'),
// copy 到哪里去
to: './public'
}]),
new webpack.ProvidePlugin({
// 文件中使用了 jquery 库时，会打包该库
$: 'jquery'
})
],
// 将 module 中的配置放入 webpack.rules.js 文件中，引入 webpack.config.js 中，即写成模块
// module: rules
module: {
rules: [
{
// 正则匹配
test: /\.css$/,
// use: [
// // 引入 style-loader 和 css-loader 中间件
// {loader: 'style-loader'},
// {loader: 'css-loader'}
// ]
//
use: eXtract.extract({
fallback: 'style-loader',
use: ['css-loader', 'postcss-loader'],
// 配置背景图的路径
publicPath: '../'
})
},
{
test: /\.(js|jsx)$/,
use: ['babel-loader'],
// 不包含 node_modules 目录中的 js/jsx 文件
exclude: /node_modules/
},
{
test: /\.less$/,
// // loader 加载从右到左，先经过 less-loader文件，再经过 css-loader 文件，最后经过 style-loader 文件
// // 这种配置下 less 样式存在 html 页面中 style 标签中，dist 文件夹中的 html 也不会显示
// use: ['style-loader', 'css-loader', 'less-loader']
use: eXtract.extract({
// 将 less 生成的 css 文件分离出来，加在 css 文件中
fallback: 'style-loader',
use: ['css-loader', 'less-loader']
})
},
{
test: /\.(sass|scss)$/,
// use: ['style-loader', 'css-loader', 'sass-lo']
use: eXtract.extract({
fallback: 'style-loader',
use: ['css-loader', 'sass-loader']
})
},
{
test: /\.(png|jpg|gif)$/,
use: [{
// 引入 url-loader 中间件
loader: 'url-loader',
// 当图片大于 50 字节即 50 兆，便会在前端页面显示相对路径，反之，则转换为 base64 的图片
options: {
// 50 字节
limit: 50,
// 图片打包出去的目录
outputPath: 'img'
}
}]
}
]
},
// 将不同的库分开打包，分别进入 html 文件中，vender 名字可变
optimization: {
splitChunks: {
cacheGroups: {
vender: {
chunks: 'initial',
// 对应 entry 中的名称
name: 'jquery',
enforce: true
}
}
}
}
};
