生成package.json
先了解package.json作用,推荐一篇文章来理解
链接: https://www.jianshu.com/p/cee645aa16a3.
用快捷方式：npm init -y 来创建package.json,可省去敲回车的步骤，生成一个默认的package.json
配置webpack、webpack-cli
执行命令 npm i webpack webpack-cli -D
生成node_modules包管理工具下载包的文件夹
webpack配置过程
配置文件目录
由于webpack分两种模式开发模式（development）和生产模式（production），
所以就分出三种配置文件分别放入config目录中
webpack.base.js的配置
webpack.base.js-基础模块，是开发模块和生产模块通用模块
const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const HTMLWebpackPlugin = require("html-webpack-plugin");
const resolve = dir => path.resolve(__dirname, "..", dir);
module.exports = {
entry: resolve("src/js/index.js"),//入口文件
output: {//出口文件
path: resolve("dist"),
filename: "js/[name][hash:8].js",
chunkFilename: 'js/[id].[chunkhash:8].js'
},
module: {
rules: [
{
test: /\.css$/,
use: [{
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: "../"
}
}, "css-loader", "postcss-loader"],
include: resolve("src"),
exclude: /node_modules/
},
{
test: /\.scss$/,
use: [{
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: "../"//让css从上级去查找
}
}, "css-loader", "postcss-loader", "sass-loader"],
include: resolve("src"),
exclude: /node_modules/
}, {
test: /\.js$/,
use: {
loader: "babel-loader",
options: {
presets: [
"@babel/preset-env"
]
}
},
include: resolve("src"),
exclude: /node_modules/
}, {
test: /\.html$/,
use: ["html-withimg-loader"],
include: resolve("src"),
exclude: /node_modules/
}, {
test: /\.(jpg|png|gif)$/,
use: {
loader: "url-loader",
options: {
limit: 1024 * 8,
esModule: false,
outputPath: "images/"
}
},
include: resolve("src"),
exclude: /node_modules/
}
]
},
resolve: {
extensions: ['.js', '.css', '.json'],//页面引用时就不需加后缀
alias: {//别名
"@": resolve('src')
}
},
optimization: {
splitChunks: {
cacheGroups: {
common: {//公共的模块
chunks: "initial",
minSize: 0,
minChunks: 2
},
vendor: {//第三方代码抽离
priority: 1,
test: /node_modules/,
chunks: "initial",
minSize: 0,
minChunks: 2
}
}
}
},
plugins: [
new HTMLWebpackPlugin({
template: resolve("src/index.html"),
filename: "index.html",
hash: true
}),
new MiniCssExtractPlugin({
filename: "css/[name][hash:8].css"
})
]
}
1、css配置的讲述：
1.1 先安装
npm i mini-css-extract-plugin style-loader css-loader -D
npm i postcss-loader autoprefixer -D
npm i sass-loader node-sass -D
1.2 作用
mini-css-extract-plugin插件：把css样式从js文件中提取到单独的css文件中
css-loader：负责解析css相关文件
style-loader：负责把css样式插入到head的标签中
postcss-loader autoprefixer: 实现自动根据兼容性的需求给css加私有前缀的功能
sass-loader node-sass:css预编译程序，node-sass来解析sass文件
2、js配置的讲述
2.1 安装
npm i babel-loader @babel/core @babel/preset-env -D
2.2 作用
babel-loader：使用 Babel 转换 JavaScript 依赖关系的 Webpack 加载器
@babel/core： 将 ES6 代码转换为 ES5
@babel/preset-env： 决定使用哪些 api 为旧浏览器提供现代浏览器的新特性
3、图片处理
3.1 安装
npm i html-withimg-loader -D
npm i file-loader url-loader -D
3.2作用
file-loader：默认会在内部生成一张图片到dist目录下，然后把生成图片的名字返回来
url-loader ：处理小于设定字节，就生成base64的图片
html-withimg-loader：打包html中img引入的图片
4、html配置
4.1安装
npm i html-webpack-plugin -D
4.2作用
生成html页面，为html文件中引入的外部资源
webpack.dev.js的配置
webpack.dev.js-针对开发模块
const merge = require("webpack-merge");
const base = require("./webpack.base");
const webpack = require("webpack");
const mode = "development";
module.exports = merge(base, {
mode: mode,
devServer: {
port: 8080,
compress: true,
open: false
},
plugins: [
new webpack.DefinePlugin({
isDev: JSON.stringify(mode)
})
]
})
webpack-dev-server:服务器的配置
npm i webpack-dev-server -D
webpack.pro.js的配置
webpack.pro.js-针对生产模块
const merge = require("webpack-merge");
const base = require("./webpack.base");
const OptimizeCssAssetsWebpackPlugin = require("optimize-css-assets-webpack-plugin");
const terserWebpackPlugin = require("terser-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const webpack = require("webpack");
const mode = "development";
module.exports = merge(base, {
mode: "production",
optimization: {
minimizer: [
new OptimizeCssAssetsWebpackPlugin({}),
new terserWebpackPlugin({})
]
},
plugins: [
new CleanWebpackPlugin(),
new webpack.DefinePlugin({
isDev: JSON.stringify(mode)
})
]
})
1、webpack-merge:合拼文件
npm i webpack-merge -D
2、optimize-css-assets-webpack-plugin：压缩css文件，terser-webpack-plugin:压缩js文件
npm i optimize-css-assets-webpack-plugin terser-webpack-plugin -D
3、clean-webpack-plugin:每次打包之前，先把dist目录删掉，创建最新的目录，避免一些不必要的文件还留在dist目录下
npm i clean-webpack-plugin -D
package.json的配置
{
"name": "layout",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --progress --config ./config/webpack.pro.js",
"dev": "webpack-dev-server --inline --progress --config ./config/webpack.dev.js"
},
"browserslist": [
"defaults",
"not ie < 11",
"last 2 versions",
"> 1%",
"iOS 7",
"last 3 iOS versions"
],
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.10.4",
"@babel/preset-env": "^7.10.4",
"autoprefixer": "^9.8.4",
"babel-loader": "^8.1.0",
"clean-webpack-plugin": "^3.0.0",
"copy-webpack-plugin": "^6.0.3",
"css-loader": "^3.6.0",
"file-loader": "^6.0.0",
"html-webpack-plugin": "^4.3.0",
"html-withimg-loader": "^0.1.16",
"less-loader": "^6.2.0",
"mini-css-extract-plugin": "^0.9.0",
"node-sass": "^4.14.1",
"optimize-css-assets-webpack-plugin": "^5.0.3",
"postcss-loader": "^3.0.0",
"sass-loader": "^9.0.1",
"style-loader": "^1.2.1",
"terser-webpack-plugin": "^3.0.6",
"url-loader": "^4.1.0",
"webpack": "^4.43.0",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0",
"webpack-merge": "^4.2.2"
},
"dependencies": {
"jquery": "^3.5.1"
}
}
postcss.config.js的配置
module.exports = {
plugins: [require("autoprefixer")]
}
可以到我的github来看看
链接: https://github.com/mina882/h5-responsivepage.