package.json文件
{
"devDependencies": {
"@babel/core": "^7.12.3",
"@babel/preset-env": "^7.12.1",
"babel-loader": "^8.1.0",
"core-js": "^3.6.5",
"css-loader": "^5.0.0",
"eslint": "^7.12.1",
"eslint-config-airbnb-base": "^14.2.0",
"eslint-loader": "^4.0.2",
"eslint-plugin-import": "^2.22.1",
"file-loader": "^6.1.1",
"html-loader": "^1.3.2",
"html-webpack-plugin": "^4.5.0",
"less": "^3.12.2",
"less-loader": "^7.0.2",
"mini-css-extract-plugin": "^1.2.0",
"optimize-css-assets-webpack-plugin": "^5.0.4",
"postcss-loader": "^4.0.4",
"postcss-preset-env": "^6.7.0",
"style-loader": "^2.0.0",
"url-loader": "^4.1.1",
"webpack": "^5.2.0",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0"
},
"browserslist": {
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
],
"producation": [
"> 0.01%",
"not dead",
"not op_mini all"
]
},
"eslintConfig": {
"extends": "airbnb-base",
"env": {
"browser": true
}
},
"scripts": {
"build": "webpack --config webpack.prod.js --mode production",
"server": "webpack-dev-server --config webpack.dev.js --open --hot --inline --mode development"
},
"dependencies": {
"clean-webpack-plugin": "^3.0.0",
"copy-webpack-plugin": "^8.0.0",
"webpack-merge": "^5.7.3"
}
}
将生产环境和开发环境的webpack配置文件分开
开发环境 webpack.dev.js
const {
resolve } = require("path");
/** 引入插件 */
const HtmlWebpackPlugin = require(require.resolve("html-webpack-plugin"));
/** 用于复制一些静态资源 */
const CopyWebpackPlugin = require("copy-webpack-plugin");
process.env.NODE_ENV = "development";
module.exports = {
/** 输入 */
entry: "./src/index.js",
/** 输出 */
output: {
/** 将js文件夹放到bundle/js文件夹下 */
filename: "js/bundle.js",
path: resolve(__dirname, "bundle"),
publicPath: "/",
},
/** 开发环境采用这种source-map 易于找到错误点 */
devtool: "eval-source-map",
/** loader 配置 1下载 2使用(配置loader) */
module: {
rules: [
{
/*
js的语法检查： 需要下载 eslint-loader eslint
注意：只检查自己写的源代码，第三方的库是不用检查的
airbnb(一个流行的js风格) --> 需要下载 eslint-config-airbnb-base eslint-plugin-import
设置检查规则：
package.json中eslintConfig中设置
"eslintConfig": {
"extends": "airbnb-base"， // 继承airbnb的风格规范
"env": {
"browser": true // 可以使用浏览器中的全局变量(使用window不会报错)
}
}
*/
test: /\.js$/,
exclude: /node_modules/, // 忽略node_modules
enforce: "pre", // 优先执行
loader: "eslint-loader",
options: {
// 自动修复
fix: true,
},
},
{
/** 对所有以.css结尾的文件进行匹配 */
test: /\.css$/,
/** use执行顺序， 从右往左，从下往上 */
use: [
/** 创建一个style标签, 将js中的css样式资源插入进去，添加到页面生效 */
// 'style-loader',
/** 将css文件编程commonjs模块加载js中，里面内容是样式字符串 */
// 'css-loader',
{
loader: "style-loader" },
{
loader: "css-loader",
},
],
},
{
/** 对所有以.less结尾的文件进行匹配 */
test: /\.(less)$/,
use: ["style-loader", "css-loader", "less-loader"],
},
{
/** webpack 处理图片的的配置,
* 缺点 没办法处理html中直接引入的图片
*/
test: /\.(jpg|jpge|png|gif)$/,
/** 当只需要用loader时可以这样写,需要下载两个包 url-loader file-loader
* 因为url-loader 依赖于 file-loader
* */
loader: "url-loader",
/** options可以配置图片处理的情况 */
options: {
/** limit 限制8kb一下的图片转为base64
* 优点 图片转为base64以后,加载图片不再需要请求服务器，减轻服务器压力
* 缺点 图片转为base64会造成图片体积变大的问题,因此本身太大的图片不适合转为base64
* */
limit: 8 * 1024,
/** 将处理后的图片命名规则，hash:10 指的是命名hash保留10位，ext保留原有的后缀名 */
name: "[hash:10].[ext]",
/** 关闭es6模块 */
// esModule:false
// 将图片放到bundle/imgs 文件夹下
outputPath: "imgs",
},
},
{
/** 为了弥补html中直接引入的图片无法打包的问题，使用html-loader， */
test: /\.html$/,
loader: "html-loader",
},
{
/** exclude,除了后缀名为下面的文件，都需要经过file—loader处理 */
exclude: /\.(css|js|html|jpg|jpge|png|gif|less)$/,
loader: "file-loader",
options: {
/** 将其他文件放到bundle/resources文件夹下 */
outputPath: "resources",
},
},
],
},
/** 插件配置 1下载 2引入 3使用 */
plugins: [
new HtmlWebpackPlugin({
/** 将路径的html复制一份，自动引入打包输出的所有资源 */
template: "./src/index.html",
// alwaysWriteToDisk: true,
/** 创建的html的名字，如果不设置默认为index.html */
// filename: 'index.html',
/** 压缩html */
minify: {
// 移除空格
collapseWhitespace: true,
// 移除注释
removeComments: true,
},
title: "dx",
}),
/** 将指定文件夹的资源复制到指定路径 */
new CopyWebpackPlugin({
patterns: [
{
from: "./src/static",
to: "static",
},
],
}),
],
/** 模式开发模式 development 或者生产模式 production */
mode: "development",
/** devserver 默认寻找的是打包后的index.html,所以在使用HtmlWebpackPlugin的时候，注意要生成index.html文件 */
devServer: {
contentBase: "./bundle",
historyApiFallback: true,
inline: true,
progress: true,
/** 是否开启压缩 */
compress: true,
/** 端口号 */
port: 3000,
/** 是否自动打开默认浏览器 */
open: true,
hot: true,
},
};
生产环境 webpack.prod.js
const {
resolve } = require("path");
/** 引入插件 */
const HtmlWebpackPlugin = require(require.resolve("html-webpack-plugin"));
/** 用于将样式文件单独提取出来 */
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
/** 用于管理当前的环境, 仅对样式的兼容性生效，这里指样式兼容性以生产环境开发为准*/
process.env.NODE_ENV = "producation";
/** 用于将样式文件压缩 */
const OptimizeCssAssetsWebpackPlugin = require("optimize-css-assets-webpack-plugin");
/** 用于复制一些静态资源 */
const CopyWebpackPlugin = require("copy-webpack-plugin");
/** 用于每一次打包后清楚上一次打包的内容 */
const {
CleanWebpackPlugin } = require("clean-webpack-plugin");
/** 复用的样式配置 loader */
const commonCssLoader = [
/** 创建一个style标签, 将js中的css样式资源插入进去，添加到页面生效 */
// 'style-loader',
/** 将css文件编程commonjs模块加载js中，里面内容是样式字符串 */
// 'css-loader',
// { loader: 'style-loader' },
/** 为了将css文件单独提取为文件，用MiniCssExtractPlugin.loader取代它 */
{
loader: MiniCssExtractPlugin.loader,
},
{
loader: "css-loader",
},
{
/** 解决样式兼容性 */
loader: "postcss-loader",
options: {
postcssOptions: {
plugins: [
[
"postcss-preset-env",
{
// 其他选项
},
],
],
},
},
},
];
module.exports = {
/** 输入 */
entry: {
index: ["./src/index.js"],
},
/** 输出 */
output: {
/** 将js文件夹放到bundle/js文件夹下 */
filename: "js/[name].js",
path: resolve(__dirname, "bundle"),
publicPath: "/",
chunkFilename: "js/[name]_chunk.js",
},
/** 生产环境采用这种source-map 隐藏源代码 */
devtool: "nosources-source-map",
/** loader 配置 1下载 2使用(配置loader) */
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader",
options: {
presets: [
[
"@babel/preset-env",
/** 按需加载高级兼容性处理 */
{
useBuiltIns: "usage",
/** 指定版本 */
corejs: {
version: 3,
},
/** 指定兼容性做到哪一版本的浏览器,实现按需加载 */
targets: {
chrome: "60",
firefox: "60",
ie: "9",
safari: "10",
edge: "17",
},
},
],
],
//babel缓存,让第二次打包速度更快
cacheDirectory: true,
},
},
{
/*
js的语法检查： 需要下载 eslint-loader eslint
注意：只检查自己写的源代码，第三方的库是不用检查的
airbnb(一个流行的js风格) --> 需要下载 eslint-config-airbnb-base eslint-plugin-import
设置检查规则：
package.json中eslintConfig中设置
"eslintConfig": {
"extends": "airbnb-base"， // 继承airbnb的风格规范
"env": {
"browser": true // 可以使用浏览器中的全局变量(使用window不会报错)
}
}
*/
test: /\.js$/,
exclude: /node_modules/, // 忽略node_modules
enforce: "pre", // 优先执行
loader: "eslint-loader",
options: {
// 自动修复
fix: true,
},
},
{
/** 对所有以.css结尾的文件进行匹配 */
test: /\.css$/,
/** use执行顺序， 从右往左，从下往上 */
use: [...commonCssLoader],
},
{
test: /\.less$/,
use: [...commonCssLoader, "less-loader"],
},
{
/** webpack 处理图片的的配置,
* 缺点 没办法处理html中直接引入的图片
*/
test: /\.(jpg|jpge|png|gif)$/,
/** 当只需要用loader时可以这样写,需要下载两个包 url-loader file-loader
* 因为url-loader 依赖于 file-loader
* */
loader: "url-loader",
/** options可以配置图片处理的情况 */
options: {
/** limit 限制8kb一下的图片转为base64
* 优点 图片转为base64以后,加载图片不再需要请求服务器，减轻服务器压力
* 缺点 图片转为base64会造成图片体积变大的问题,因此本身太大的图片不适合转为base64
* */
limit: 8 * 1024,
/** 将处理后的图片命名规则，hash:10 指的是命名hash保留10位，ext保留原有的后缀名 */
name: "[hash:10].[ext]",
/** 关闭es6模块 */
// esModule:false
// 将图片放到bundle/imgs 文件夹下
outputPath: "public",
},
},
{
// /** 为了弥补html中直接引入的图片无法打包的问题，使用html-loader， */
test: /\.html$/,
loader: "html-loader",
},
{
/** exclude,除了后缀名为下面的文件，都需要经过file—loader处理 */
exclude: /\.(css|js|html|jpg|jpge|png|gif|less)$/,
loader: "file-loader",
options: {
/** 将其他文件放到bundle/resources文件夹下 */
outputPath: "resources",
},
},
],
},
/** 插件配置 1下载 2引入 3使用 */
plugins: [
// 自动清空打包的目录
new CleanWebpackPlugin(),
/** 插件实现的功能 默认会创建一个空的html,自动引入打包输出的所有资源 */
new HtmlWebpackPlugin({
/** 将路径的html复制一份，自动引入打包输出的所有资源 */
template: "./src/index.html",
// alwaysWriteToDisk: true,
/** 创建的html的名字，如果不设置默认为index.html */
// filename: 'index.html',
/** 压缩html */
minify: {
// 移除空格
collapseWhitespace: true,
// 移除注释
removeComments: true,
},
title: "dx",
}),
new MiniCssExtractPlugin({
/** 将单独提取出来的css文件放入css文件夹中 */
filename: "css/index.css",
}),
/** 样式文件压缩 */
new OptimizeCssAssetsWebpackPlugin(),
/** 将指定文件夹的资源复制到指定路径 */
new CopyWebpackPlugin({
patterns: [
{
from: "./src/static",
to: "static",
},
],
}),
],
/** 模式开发模式 development 或者生产模式 production */
mode: "production",
};
在项目根目录下创建 src文件夹和public文件夹
public文件夹下放置公用文件 比如项目logo
src文件夹下放置主业面 index.html index.less index.js
src文件夹下放置static 文件夹 ，static文件夹保存一些静态资源 比如字体图标 iconfont等
src文件夹下放置helper.js 里面是封装的一些公用方法。