webpack的生产模式兼容性处理
注意不要有中文路径并且文件扩展名必须显示出来不然会有小问题
- 初始化
-
npm init --yes
初始化过后修改package.json,scripts下面添加个配置文件 意思就是使用一个配置文件来编译
“build”:“webpack --config ./webpack.config.js” - 安装包
-
yarn add webpack webpack-cli --dev
- 在根目录上创建一个文件
-
webpack.config.js
此文件不可改
webpack配置4大点:
1.
入口entry 也就是文件最后运行的文件
2.
出口output
3.
loader
4.
plugins插件
注意:此处命名不可更改
const path =require("path")
const HtmlWebpackPlugin =require("html-webpack-plugin") //将生成的html与js结合在一起
//这个插件的目的是直接清空output配置下面的目录
const {CleanWebpackPlugin}=require("clean-webpack-plugin");
//导入打包进度条的插件
const ProgressBarWebpackPlugin = require("progress-bar-webpack-plugin")
//导入画笔包,用于设置进度条文字的颜色
const chalk = require("chalk")
//压缩css并进行分离
const MiniCssExtractPlugin=require("mini-css-extract-plugin");
const { publicDecrypt } = require("crypto");
const webpack=require("webpack")
const config={
mode:"production", //development开发模式,代码不会压缩,默认是production生产模式,不会转码
entry:path.join(__dirname,"./js/Student.js"),
output:{
filename:"bundle.js" , //最终生成的文件名也就是出口
path:path.join(__dirname,"./dist") //最终生成的文件在dist下面
publicPath:"./" //所有生成的出口文件都放在dist下面
},
module:{
rules:[
{
test:/\.js$/, //规则使用正则表达式 此处js文件需要处理
exclude:/node_modules/, //排除node_modules下面的js
loader:"babel-loader" //需要使用babel-loader去处理文件 ,不需要导入
},
{ //配置css
test:/\.css$/,
// exclude:/node_modules/, //排除文件可以省略
use:[
//"style-loader", //此插件,此时css文件全部插在js里面,因此还要导入style-loader将其显示到页面上
MiniCssExtractPlugin.loader,
{
loader: "css-loader", //此插件是用来处理那些非JavaScript文件,因为`Webpack`本身是只能处理js文件的
options: { importLoaders: 1 } //用于向下一层处理比如在执行css代码css代码引入了另一个css代码
},
"postcss-loader" //处理css的兼容性问题
]
},
//配置sass兼容性
{
test: /\.s(c|a)ss$/,
use: [ //一个loader直接写多个用use
MiniCssExtractPlugin.loader,
// "style-loader",
{
loader: "css-loader", //详细的配置用对象来处理
options: { importLoaders: 2 } //在css里发现sass下降两个层级重新执行一遍
},
"postcss-loader",
"sass-loader"
]
},
{ //图片配置
test: /\.(jpe?g|png|gif|bmp|svg|tif|ico)$/,
use: [
{
loader: "url-loader",
options: {
//这里以Byte为单位
limit: 1024 * 8, //小于8kb的,就不交给file-loader了,直接转base64,limit相当于一个限制条件
name: '[name].[hash:8].[ext]', //在原来的名字上去哈希前8位加上原来的后缀,这样文件名就解决了名字过长的问题
outputPath: "img/" , //出口路径设置图片
publicPath:"../img" //公共路径防止图片路径不对因为在分离的时候,路径不对
}
}
]
},{
//解析bootstrap的字体
test: /\.(ttf|eot|woff|woff2)$/,
use: [{
loader:"url-loader",
options:{
limit:10,
name:"[name].[hash:8].[ext]",
outputPath:"fonts/",
publicPath:"../fonts"
}
}]
}
]
},
plugins:[
new HtmlWebpackPlugin({
//以什么为模板来生成
template: path.join(__dirname, "./index.html"),
//生成的新文件名叫什么
filename: "index.html",
//生成的js与css是否自动插入到页面当中,也就是插入script或link
inject: true
}),
new CleanWebpackPlugin(),
new ProgressBarWebpackPlugin({
format: chalk.green("进度:") + chalk.red("[:bar]") + chalk.green(" :percent") + "( :elapsed seconds)", //(:elapsed seconds)耗得时间 percent百分比 [:bar]进度条
clear: false //不清除进度条
}),
//将js与css进行分离的插件
new MiniCssExtractPlugin({
filename:"css/index.[hash:8].css", //文件名
ignoreOrder:false //忽略排序
}),
new webpack.ProvidePlugin({
"jquery":"jquery", //处理插件引入名的问题
"$":"jquery",
"jQuery":"jquery"
})
],
//配置服务器webpack-dev-server
devServer:{
port:9999,
contentBase:"./dist", //生成的文件放在dist文件下面
//配置成功以后直接打开浏览器
open:true,
// 开启热模块替换
hot:true
}
}
//这里一定要使用module.exports导出,因为webpack是运行在nodejs平台下面前,他是用nodejs的规范所以使用module导出,不能使用export导出
module.exports=config;
创建dist
文件夹
创建一个html文件,如何将html渲染到dist文件下面
导入一个插件
yarn add html-webpack-plugin --dev
这是一个开发依赖
删除初始化文件夹
导入一个插件
yarn add clean-webpack-plugin --dev
引入的时候需要结构,这是直接清空output下面的目录也就是dist不需要的文件
webpack处理兼容性问题
导入两个插件
yarn add babel-loader @babel/core --dev
新建一个.babelrc
来实现兼容性处理
首先安装插件
yarn add @babel/preset-env --dev
preset-env
他会根据你当前的环境配置来决定我要使用那些处理方式
{
"presets":[ //presets 预设也就是预期的结果 env环境变量,根据当前环境变换
["@babel/preset-env",
{
"useBuiltIns":"usage", //"useBuiltIns"到底用什么方式插入的,usage 代表用到就插入,还有其他值entry开始就插入,false默认不插入
"corejs":"2", //第二个版本
"targets":{
"browsers":[ //浏览器列表
"last 1 version", //从浏览器最后一个版本开始往前兼容
"> 1%", //互联网市场大于1%的
"not dead" //没有被淘汰的
]}}]]}
并不是越严格越好,反而性能不高,最好写死比如ie7,ie8
为了更好的兼容性还需要导入插件来适应ES6独有的比如map,aymbol等使用pollfily
,生成器函数使用core-js
来处理,因此还需要导入垫片来更好的处理兼容
导入两个插件
yarn add core-js@2 @babel/polyfill
因为这两个插件属于生成依赖所以导入时不用加--dev
2
代表第二个版本,@babel/polyfill相当于垫片 这样ES6里面有的ES5也都有了
css兼容性处理
在项目中新建一个css文件夹
在入口文件js中添加
//在js文件是导入了一个css文件,让js去处理css
import "../css/index.css"
导入相关插件
yarn add css-loader --dev
此插件是用来处理那些非Java Script文件,因为Webpack
本身是只能处理js文件的
在webpack.config.js添加规则,此时css文件全部插在js里面,因此还要导入style-loader将其显示到页面上
yarn add style-loader --dev
处理css兼容性
postcss-loader
是一个用JavaScript转换css兼容性的插件
此时还并没有转换,因为还缺少预设因此还要创造一个配置文件
在文件中新建一个postcss.config.js
文件
//这是postcss的配置文件
module.exports={
//postcss处理css文件的时候需要的插件
plugins:[
require("postcss-import"),
require("postcss-cssnext"),
require("cssnano"),
]
}
下载3个常用插件
yarn add postcss-import postcss-cssnext cssnano --dev
并且还要在package.json 最下面配置目标浏览器兼容性
"browserslist": [
"last 2 version",
"> 1%"
]
此时所有css文件都已经做了兼容性
sass需要导入的插件
yarn add sass-loader node-sass --dev
图片处理兼容性
yarn add url-loader --dev
yarn add file-loader --dev
这两个文件通常一起使用图片大的时候就使用文件形式