本文共 8834 字,大约阅读时间需要 29 分钟。
一直使用
webpack
,上次也分享过webpack
配置es6~9
的语法,但是对于一些小白童鞋来说,最基本的配置都不太知道,刚好利用春节休假期间对webpack4
的知识点梳理一次。方便一些刚刚入行的人学习,也是对自己的一种总结与提高
1、全局安装与局部安装
javascript
是弱语言,有局部变量和全局变量,其实全局安装与局部安装的性质与函数的全局变量与局部变量有点类似。2、安装包的时候--save
与-D
的区别
一般我们仅仅是在开发环境依赖的包直接使用-D
就可以,这样就会在项目的package.json
文件中的devDependencies
新增相关的配置信息
npm install webpack webpack-cli -D复制代码
--save
是会放在package.json
文件的dependencies
中
记住仅仅是开发环境需要使用的包就使用-D
webpack
所谓的0配置使用
webpack
是基于配置的前端脚手架,在实际项目中开发需要配置你需要的插件与加载器。
1、webpack
最基本的基重要的是:
plugins
:配置插件的
module
:主要配置一些加载器
2、初始化项目
创建一个文件夹webpack-demo
初始化生成package.json
文件
npm init --yes复制代码
3、安装webpack
最基本的依赖包
npm install webpack webpack-cli -D复制代码
4、创建一个文件夹src
并在里面创建一个index.js
的文件
5、在命令行中运行(先忽视警告信息)
npx webpack复制代码
6、在生成的dist
文件夹下会生成一个大包好的main.js
文件,在该文件夹下创建一个index.html
文件引入main.js
,在浏览器中查看控制台是否输出信息。
webpack
的配置1、在项目下创建一个webpack.config.js
文件
2、可以配置的有
const path = require('path');module.exports = { entry: '', // 打包文件的入口 output: {}, // 打包后的出口文件配置 devServer: {}, // 开发服务器 module: {}, // 模块配置 plugins: {}, // 插件的配置 mode: 'development', // ['development', 'production']模式 resolve: {}, // 配置解析}复制代码
1、安装包
npm install webpack-dev-server -D复制代码
2、在webpack.config.js
中配置入口文件与出口文件
module.exports = { entry: './src/index.js', // 打包文件的入口 output: { filename: 'build.js', // 注意这个位置必须是绝对路径 path: path.join(__dirname, 'dist') }, ...}复制代码
3、配置开发devServer
module.exports = { ... devServer: { contentBase: path.join(__dirname, 'dist'), port: 8000, compress: true, // 自动压缩 open: true, // 自动打开浏览器 },}复制代码
4、在package.json
中配置命令
..."scripts": { "dev": "webpack-dev-server",},...复制代码
5、调试性的运行命令(会自动打开浏览器,但是里面没任何信息展示)
npm run dev复制代码
6、使用html-webpack-plugin
自动生成html
页面的插件
1.安装包
npm install html-webpack-plugin -D复制代码
2.在webpack.config.js
中引入
const HtmlWebpackPlugin = require('html-webpack-plugin');复制代码
3.在plugins
中配置
plugins: [ new HtmlWebpackPlugin({ template: './src/index.html', title: 'webpack测试', })],复制代码
4.关于index.html
的内容
<%=htmlWebpackPlugin.options.title%> 复制代码
5.关于html-webpack-plugin
的配置
6、运行npm run dev
直接打开浏览器,打开控制台可以查看到打印信息
7、创建打包命令(在package.json
中添加命令)
"scripts": { "dev": "webpack-dev-server", "build": "webpack"},复制代码
8、使用哈希值的方式创建随机生成数字,解决缓存的问题
1、对生成的js
文件生成随机数
output: { filename: 'build.[hash].js', // 默认生成20位的哈希值 // filename: 'build.[hash:8].js' 可以定制生成多少位的随机数 // 注意这个位置必须是绝对路径 path: path.join(__dirname, 'dist')},复制代码
2、对html
里面引入的js
生成哈希值(会生成?哈希值
)
plugins: [ new HtmlWebpackPlugin({ template: './src/index.html', title: 'webpack测试', hash: true, })],复制代码
3、运行命令npm run build
可以查看dist
文件夹下的文件是否带了尾巴(注意点:要更新文件打包会生成新的,如果没改动文件,仅仅是多次打包是一样的)
4、运行后的效果
复制代码
9、关于html-webpack-plugin
其它常用的配置
new HtmlWebpackPlugin({ ... minify: { removeAttributeQuotes: true, // 去除双引号 collapseWhitespace: true, // 合并代码到一行 }})复制代码
plugin
的插件的使用我们对每次打包后的缓存文件进行删除确保每次都是最新的
1、安装
npm install clean-webpack-plugin -D复制代码
2、在webpack.config.js
中使用
const CleanWebpackPlugin = require('clean-webpack-plugin');plugins: [ new CleanWebpackPlugin(['./dist']), ...],复制代码
webpack
入口文件的几种方式1、单一入口文件(参考上面)
2、多入口文件(可以写成一个数组),共同打包带一个出口文件中
module.exports = { mode: 'development', entry: [ './src/index.js', './src/a.js' ], output: { filename: 'build.[hash:8].js', // 注意这个位置必须是绝对路径 path: path.join(__dirname, 'dist') }}复制代码
3、多入口多出口多模板的模式
1.入口文件与出口文件的配置
module.exports = { mode: 'development', entry: { index: './src/index.js', a: './src/a.js' }, output: { filename: '[name].[hash:8].js', path: path.join(__dirname, 'dist') }}复制代码
2.模板的配置(需要注明输出文件的名字)
...plugins: [ new CleanWebpackPlugin(['./dist']), new HtmlWebpackPlugin({ filename: 'index.html', // 注明打包后的文件名 template: './src/index.html', title: 'webpack测试1', hash: true, chunks: ['index'] // 注明选择哪个js文件 }), new HtmlWebpackPlugin({ filename: 'a.html', template: './src/index.html', title: 'webpack测试2', hash: true, chunks: ['a'] }) ],}...复制代码
webpack
热更新的使用1、根据上面的方式我们可以实现,修改js
代码浏览器会刷新,但是是类似我们人工的刷新(如果是有状态机的数据的时候会丢失数据)
2、我们可以使用webpack
自带的一个热更新的插件
3、使用方式
1.在webpack.config.js
中配置
const webpack = require('webpack');...plugins: [ new webpack.HotModuleReplacementPlugin(), ...]...复制代码
2.在主要的入口index.js
文件中加上
if (module.hot) { module.hot.accept();}复制代码
css
样式的
webpack
默认是支持js
的,对于别的css
或者typescript
必须要安装加载器
1、安装包
npm install style-loader css-loader less less-loader -D复制代码
2、在webpack.config.js
中的module
配置规则(use
中是一个数组,从后面解析到前面)
...module: { rules: [ { test: /\.css$/, use: [ { loader: 'style-loader' }, { loader: 'css-loader' } ] }, { test: /\.less$/, use: [ { loader: 'style-loader' }, { loader: 'css-loader' }, { loader: 'less-loader' }, ] } ] },...复制代码
3、在src
中创建一个css
的文件夹,里面创建a.css
和b.less
文件
4、在index.js
中引入样式文件
import './css/a.css';import './css/b.less';复制代码
5、启动服务,查看浏览器Elements
栏
上面的方式虽然可以加载样式文件,但是加载出来的全部的以
<style type="text/css">....</style>
的方式到页面中,增加了js
文件的体积,如果项目大,可能会造成js
文件过大加载慢,甚至加载不出的弊端。
1、抽取单独的css
目前主要有2个包可以选择
extract-text-webpack-plugin@next
mini-css-extract-plugin
(今后取代上面那个插件的包)2、安装包
npm install extract-text-webpack-plugin@next mini-css-extract-plugin -D复制代码
3、使用extract-text-webpack-plugin@next
插件的方式
1.引包
const ExtractTextWebpackPligin = require('extract-text-webpack-plugin');复制代码
2.修改module
中的加载器
module: { rules: [ { test: /\.css$/, use: ExtractTextWebpackPligin.extract({ use: [ { loader: 'css-loader' } ] }) }, { test: /\.less$/, use: ExtractTextWebpackPligin.extract({ use: [ { loader: 'css-loader' }, { loader: 'less-loader' } ] }) } ]},...复制代码
3.使用插件
plugins: [ ... new ExtractTextWebpackPligin({ filename: 'css/index.css', }), new HtmlWebpackPlugin({ template: './src/index.html', title: 'webpack测试', hash: true, // 先注释下面的代码,更好看结果 // minify: { // removeAttributeQuotes: true, // 去除双引号 // collapseWhitespace: true, // 合并代码到一行 // } })],复制代码
4、在index.js
中依然是导入css
文件
import './css/a.css';import './css/b.less';复制代码
4、使用mini-css-extract-plugin
插件方式
1.导包
const MiniCssTractPlugin = require('mini-css-extract-plugin');复制代码
2.在module
中配置
module: { rules: [ { test: /\.css$/, use: [ MiniCssTractPlugin.loader, { loader: 'css-loader' } ] }, { test: /\.less$/, use: [ MiniCssTractPlugin.loader, { loader: 'css-loader' }, { loader: 'less-loader' } ] } ]},复制代码
3.配置插件
plugins: [ ... new MiniCssTractPlugin({ filename: 'css/css.css', }),]复制代码
4.一样的在index.js
中导包
5.测试
1、导包
const ExtractTextWebpackPligin = require('extract-text-webpack-plugin');复制代码
2、预先实例化两个输出文件的对象
const cssExtract = new ExtractTextWebpackPligin('css/a.css');const lessExtract = new ExtractTextWebpackPligin('css/b.css');复制代码
3、在module
中预先实例化的对象
module: { rules: [ { test: /\.css$/, use: cssExtract.extract({ use: [ { loader: 'css-loader' } ] }) }, { test: /\.less$/, use: lessExtract.extract({ use: [ { loader: 'css-loader' }, { loader: 'less-loader' }, ] }) } ]},复制代码
4、配置插件
plugins: [ cssExtract, lessExtract, ...]复制代码
5、运行命令npm run build
查看
style
中)1.定义disable
const cssExtract = new ExtractTextWebpackPligin({ filename: 'css/a.css',});const lessExtract = new ExtractTextWebpackPligin({ filename: 'css/b.css',});复制代码
2.在modul
中使用
module: { rules: [ { test: /\.css$/, use: cssExtract.extract({ fallback: 'style-loader', use: [ { loader: 'css-loader' } ] }) }, { test: /\.less$/, use: lessExtract.extract({ fallback: 'style-loader', use: [ { loader: 'css-loader' }, { loader: 'less-loader' }, ] }) } ]},复制代码
1、安装包
npm install purifycss-webpack purify-css glob -D复制代码
2、导入
const PurifycssWebpack = require('purifycss-webpack');const glob = require('glob');复制代码
3、使用
...// 注意必须要在HtmlWebpackPlugin后面使用new PurifycssWebpack({ paths: glob.sync(path.resolve('src/*.html'))})...复制代码
css3
样式加上前缀1、使用postcss
实现该功能
2、安装包
npm install postcss-loader autoprefixer -D复制代码
3、配置postcss-loader
的加载器
...{ test: /\.css$/, use: cssExtract.extract({ fallback: 'style-loader', use: [ { loader: 'css-loader' }, { loader: 'postcss-loader'}, ] })},...复制代码
4、项目下新创建一个postcss.config.js
的配置文件
module.exports = { plugins: [ require('autoprefixer') ]}复制代码
5、在a.css
中写上css3
的样式
body { background: cyan; transform:rotate(30deg);}复制代码
6、执行命令npm run build
查看生成的文件