1.基本配置
安装
cnpm install webpack -D
cnpm install webpack-cli -D
基本的格式
module.exports={
devServer:{ //配置服务器
port:3000,
progress:true, //将运行进度输出到控制台
contentBase:['./dist','./build'], //静态的文件目录
compress:true
},
mode:"development", //production development
entry:'./src/index.js',
output:{
filename:'main.[hash:8].js',
path:path.resolve(__dirname,'dist')
},
plugins: //插件数组
[new HtmlWebpackPlugin({
template:'./src/index.html', //入口文件名
filename:'index.html', //输出的文件名
minify:{
removeAttributeQuotes:true, //删除 “”
collapseWhitespace: true //删除空格
},
hash:true //会对打包后的script标签附加一个hash值
})]
}
配置服务器
devServer:{ //配置服务器
port:3000,
progress:true, //将运行进度输出到控制台
contentBase:['./dist','./build'], //静态的文件目录
compress:true
}
配置是否压缩代码
mode:"development", //production development
配置入口
entry:'./src/index.js',
配置出口
let path=require("path");
output:{
filename:'main.[hash:8].js',
path:path.resolve(__dirname,'dist')
}
filename可以加个hash
2.打包html文件
安装插件
cnpm install html-webpack-plugin -D
引用插件
let HtmlWebpackPlugin = require('html-webpack-plugin');
插件配置
放入plugin数组
plugins:[new HtmlWebpackPlugin({
template:'./src/index.html', //入口文件名
filename:'index.html', //输出的文件名
minify:{
removeAttributeQuotes:true, //删除 “”
collapseWhitespace: true //删除空格
},
hash:true //会对打包后的script标签附加一个hash值
})]
打包后会自动引入js文件
3.打包css文件（style标签）
安装
cnpm i css-loader style-loader -D
css-loader：用来解析@import这种语法,
style-loader：将css标签插入
在入口js文件里引用
require("./index.css");
module的写法
module: { // 模块
rules: [{// 规则
test: /\.css$/, // css 处理
use: [ {
loader: 'style-loader',
options: {insertAt: 'top' }
// 将css标签插入最顶头 这样可以自定义style不被覆盖
},
'css-loader'// css-loader 用来解析@import这种语法,
]
}
]
}
use的写法
1）单个
// use: 'css-loader'
2）数组
// use: ['style-loader', 'css-loader']
3）对象
use: [ {
loader: 'style-loader',
options: {insertAt: 'top' }
},
{
loader: 'css-loader'，
options: {}
}]
4.打包less
安装
cnpm install less -D
cnpm i less-loader -D
在入口js文件里引用
require("./index.less");
配置
{ test: /\.less$/, // less 处理
use: [
{
loader: 'style-loader',
options: {insertAt: 'top' }
},
'css-loader',// css-loader 用来解析@import这种语法,
'less-loader' //less-loader less -> css
]
}
5. css打包到link标签（单独文件）
安装
cnpm install mini-css-extract-plugin -D
在入口js文件里引用
require("./index.less");
配置文件引用
let MiniCssExtractPlugin = require('mini-css-extract-plugin');
配置
plugins: [
new MiniCssExtractPlugin({
filename: 'css/main.css'
})
]
module: { // 模块
rules: [{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader'
]
}]
打包后自动生成link标签
图片.png
6. 给css加上兼容浏览器的前缀
cnpm i postcss-loader autoprefixer -D
postcss 需要配置文档 postcss.config.js
module.exports = {
plugins: [
require('autoprefixer')
]
}
配置
在css-loader下加上postcss-loader
配置文件
7.es6 转 es5
安装
cnpm i babel-loader @babel/core @babel/preset-env -D
配置文件
{
test: /\.js$/,
exclude: /node_modules/, //去掉node_modules文件夹
use: {
loader: 'babel-loader',
options: {
presets: [
'@babel/preset-env'
],
plugins:[ //支持es7语法插件
["@babel/plugin-proposal-decorators", { "legacy": true }],
["@babel/plugin-proposal-class-properties", { "loose" : true }]
]
}
}
}
安装使用babel需要的插件来支持es7的一些语法
安装：
// class
npm i @babel/plugin-proposal-class-properties -D
// 装饰器
npm i @babel/plugin-proposal-decorators -D
使用：
plugins:[
["@babel/plugin-proposal-decorators", { "legacy": true }],
["@babel/plugin-proposal-class-properties", { "loose" : true }]
]
es6语法
module.js文件
export default {
add: (a, b) => a * b
}
index.js文件
import module from './module'；
console.log("计算结果为："+module.add(5, 5))；
8.校验语法
https://blog.csdn.net/weixin_41559723/article/details/79129612
安装
cnpm i eslint eslint-loader -D
cnpm i eslint-friendly-formatter -D
自带配置文件 .eslintrc.js
module.exports = {
root: true,
parserOptions: { sourceType: 'module' },
env: { browser: true, },
rules: {
"indent": ["error", 2],
"quotes": ["error", "double"],
"semi": ["error", "always"],
"no-console": "error",
"arrow-parens": 0 }
}
webpack.config.js配置
{
test: /\.js$/,
loader: 'eslint-loader',
enforce: "pre",
include: [path.resolve(__dirname, 'src')], // 指定检查的目录
options: {require('eslint-friendly-formatter') } // 指定错误报告的格式规范
}
代码
图片.png
图片.png
报错
图片.png
图片.png
9.全局变量引入
安装
jq的安装：
cnpm i jquery -D
expose-loader安装：
cnpm i expose-loader -D
方法一
安装expose-loader
import $ from 'expose-loader?$!jquery';
console.log($);
方法二
安装expose-loader
配置文件
{
test: require.resolve('jquery'),
use: 'expose-loader?$'
}
.js文件
import $ from 'jquery';
console.log($);
方法三（注入到每个文件）
ProvidePlugin是webpack自带
配置文件
let webpack = require('webpack')
// 在plugins中配置
new webpack.ProvidePlugin({
$: 'jquery'
})
.js文件
console.log($);
方法四（在html引入CDN）
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
10.图片打包
三种情况
1）js中创建
2）css中引入
3）<img src="">
安装
cnpm i file-loader -D
cnpm i url-loader -D
第一种
.js代码
import logo from './image/04.jpg' //图片从这里引用
let image = new Image();
image.src = logo;
document.body.appendChild(image);
配置文件
{
test: /\.(png|jpg|gif)$/,
// 当图片小于多少，用base64,否则用file-loader产生真实的图片
use: {
loader: 'url-loader',
options: {
limit: 1, // 200k 200 * 1024
outputPath: './image/', // 打包后输出地址
//publicPath: 'loaclhost:3000' //加上这个src将变成 loaclhost:3000/xx.jpg
}
}
}
第三种
安装解析html image插件
cnpm i html-withimg-loader -D
html页面：
<img src="./image/01.gif" alt="01.gif">
配置文件：
{
test: /\.html$/, //解析html image里面的图片
use: 'html-withimg-loader'
},
{
test: /\.(png|jpg|gif)$/,
// 当图片小于多少，用base64,否则用file-loader产生真实的图片
use: {
loader: 'url-loader',
options: {
limit: 1, // 200k 200 * 1024
outputPath: './image/', // 打包后输出地址
}
}
}
第二种
html
<div class="img"></div>
css
.img{
width: 300px;
height: 300px;
background-image: url(./image/07.jpg);
}
配置如上
11.多页面配置
entry写成两个入口
output的 filename: "[name].js",
new HtmlWebpackPlugin({ chunks: ['home']})写两个
// 多入口
let path = require('path')
let HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
mode: 'development',
entry: {
home: './src/index.js',
other: './src/other.js'
},
output: {
filename: "[name].js",
path: path.resolve(__dirname, 'dist2')
},
plugins: [
new HtmlWebpackPlugin({
template: './index.html',
filename: 'home.html',
chunks: ['home']
}),
new HtmlWebpackPlugin({
template: './index.html',
filename: 'other.html',
chunks: ['other', 'home'] // other.html 里面有 other.js & home.js
}),
]
}
chunks绑定js文件
12.配置source-map（控制台会发现错误的具体行列）
devtool: 'source-map' // 增加映射文件调试源代码
- 源码映射 会标识错误的代码 打包后生成独立的文件 大而全 「source-map」
- 不会陈胜单独的文件 但是可以显示行和列 「evl-source-map」
- 不会产生列，产生单独的映射文件 「cheap-module-source-map」
- 不会产生文件 集成在打包后的文件中 不会产生列 「cheap-module-eval-source-map」
13.自动打包
配置文件
watch: true,
watchOptions: {
poll: 1000, // 每秒检查一次变动
aggregateTimeout: 300, // 当第一个文件更改，会在重新构建前增加延迟
ignored: /node_modules/
// 对于某些系统，监听大量文件系统会导致大量的 CPU 或内存占用。
//这个选项可以排除一些巨大的文件夹，
},
14.webpack的其他三个小插件
14.1cleanWebpackPlugin
每次打包之前删掉dist目录 cnpm i clean-webpack-plugin -D
安装
cnpm i clean-webpack-plugin -D
配置文件
let CleanWebpackPlugin = require('clean-webpack-plugin');
output: {
path: path.resolve(process.cwd(), 'dist'),
},
plugins: [
new CleanWebpackPlugin()
]
14.2copyWebpackPlugin
一些静态资源也希望拷贝的dist中
安装
cnpm i copy-webpack-plugin -D
配置文件
let CopyWebpackPlugin = require('copy-webpack-plugin')
plugins: [
// new CopyWebpackPlugin([{from: './src/readme.md'}])
//将readme.md复制到dist文件夹
new CopyWebpackPlugin([{from: './src/readme.md', to: './public'} ])
//将readme.md复制到dist文件夹下的public文件夹
]
14.3 bannerPlugin内置模块无需安装
在打包后js文件前面写一些个人信息时间
let webpack = require('webpack');
new webpack.BannerPlugin('hello world')
// or
//new webpack.BannerPlugin({ banner: 'hello world'})
new webpack.BannerPlugin({ banner: (new Date()).toString()})//打包的实施时间
15.热更新
模块热更新是webpack的一个功能，他可以使得代码修改过后不用刷新浏览器就可以更新，是高级版的自动刷新浏览器。
devServer中通过hot属性可以空时模块的热替换
devServer: {
hot:true,
port:3000,
progress:true, //将运行进度输出到控制台
contentBase:['./dist'], //静态的文件目录
compress:true
},
new webpack.HotModuleReplacementPlugin() //热加载插件
网友评论