1.第一步 npm i eslint-config-airbnb-base eslint eslint-plugin-import eslint-loader -D 2.第二步 package.json 中eslintConfig中设置～
"eslintConfig": {
"extends": "airbnb-base
}
3.第三步 webpack.config.js webpack的配置文件 去修改loader配置
// webpack.config.js webpack的配置文件
// 作用：指示webpack 干哪些活（当你运行webpack指令时，会加载里面的配置）
// 所有构建工具都是基于node js平台运行的～ 模块化默认采用common.js
// resolve 用来拼接绝对路径的方法
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const optimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
//
process.env.NODE_ENV = 'developement';
module.exports = {
// webpack 配置
// 入口起点
entry: './src/index.js',
// 输出
output: {
// 输出文件名
filename: './js/build.js',
// 输出路径
// __dirname nodejs 的变量，代表当前文件的目录绝对路径
path: resolve(__dirname, 'build'),
},
// loader的配置
module: {
rules: [
// 详细loader配置
{
// 匹配哪些文件
test: /\.css$/,
// 使用哪些loader进行处理
use: [
// 创建style标签，将js中样式资源插入进行，添加到head中生效
// 'style-loader',
// loader 取代 style-loader 。作用：提取css成单独文件
MiniCssExtractPlugin.loader,
// 将css文件变成commonjs模块加载js中，里面内容是样式字符串
'css-loader',
// css 兼容性处理：postcss--> postcss-loader postcss-preset-env
// 对浏览器兼容处理
// "browserslist": {
// 开发环境 --> 设置node环境变量： process.env.NODE_ENV = developement
// "development": [
// "last 1 chrome version",
// "last 1 firefox version",
// "last 1 safari version"
// ],
// 生产环境
// "production": [
// ">0.2%",
// "not dead",
// "not op_minni all"
// ]
// }
// 使用loader的默认配置
// post-loader
// 修改loader的配置
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: () => {
// postcss的插件
require('postcss-preset-env')();
},
},
},
],
}, {
test: /\.less$/,
// 使用哪些loader进行处理
// 使用多个loader处理 用use
use: [
// 创建style标签，将js中样式资源插入进行，添加到head中生效
'style-loader',
// 将css文件变成commonjs模块加载js中，里面内容是样式字符串
'css-loader',
// 将less文件编译成css文件
// 需要下载less 和less-loaders
'less-loader',
],
}, {
// 打包其他资源
// 排除 css js html 资源
exclude: /\.(css|less|js|html)$/,
loader: 'file-loader',
options: {
name: '[hash:10].[ext]',
// 打包输出文件夹目录
outputPath: 'media',
},
}, {
// 问题：默认处理不了html 中的img图片
test: /\.(jpg|png|gif|jpeg)$/,
// 需要下载url-loader 和 file-loader
loader: 'url-loader',
options: {
// 图片大小小于8kb，就会被base64处理，
// 优点：减少请求数量（减轻服务器压力）
// 缺点：图片体积会更大（文件请求速度更慢）
limit: 8 * 1024,
esModule: false,
// 给图片进行重新命名
// [hash:10] 取哈希值的前十位
// [ext] 取文件原来的扩展名
name: '[hash:10].[ext]',
outputPath: 'imgs',
},
}, {
test: /\.html$/,
// 处理html 文件的img图片（负责引入img，从而能被url-loaderurl-loader进行处理）
loader: 'html-loader',
},
{
// 语法检查：eslint-loader eslint
// 注意：只检查自己写的源代码，第三方的库不用检查的
// 设置检查规则
// "eslintConfig": {
// "extends": "airbnb-base
// }
// package.json 中eslintConfig中设置～
// airbnb --> eslint-config-airbnb-base eslint eslint-plugin-import
test: /\.js$/,
exclude: /node_modules/,
loader: 'eslint-loader',
options: {
// 自动修复
fix: true,
},
},
],
},
// plugins 的配置
plugins: [
// 详细plugins的配置
// html-webpack-plugin 默认会创建一个空的html，自动引入打包输出的所有资源（js/css）
new HtmlWebpackPlugin({
// 复制 ./src/index.html 文件 并自动引入打包输出的所有资源（js/css）
template: './src/index.html',
}),
new MiniCssExtractPlugin({
filename: 'css/build.css',
}),
// css 压缩
new optimizeCssAssetsWebpackPlugin(),
],
// 模式
mode: 'development', // 开发模式
// mode: 'production', //生产模式
// 开发服务器 devServer 用来自动化（自动编译，自动打开浏览器，自动刷新浏览器）
// 只会在内存中编译打包，不会有任何输出
// 启动devServer 的指令为npx webpack-dev-server
devServer: {
contentBase: resolve(__dirname, 'build'),
// 启动gzip压缩
compress: true,
// 端口号
port: 3000,
// 自动打开浏览器
open: true,
},
};
