webpack 使用的一些常用配置 #8
Description
一、修改 webpack 默认的打包路径
首先，webpack默认的入口文件位置为 src => index.js
默认的输出文件位置为 dist => main.js
如需修改打包的入口与出口，需要在webpack.config.js中添加如下配置，注意entry和output是作为属性暴露的：
const path = require('path') // node 中专门操作路径的模块
entry: path.join(__dirname, './src/index.js'), // 定义入口文件的路径和文件名字
output: {
path: path.join(__dirname, './dist'), // 输入文件的存放路径
filename: 'bundle.js'
}
二、为 webpack 添加自动打包功能
先运行 npm i webpack-dev-server -D （-D 是--save -dev 的缩写，表示仅用于开发环境，生产环境用不到）
在 package.json 文件中的 script 对象中添加 dev 属性(--open 表示打包后后自动在浏览器打开页面， --host 配置IP地址， --port 配置端口)：
"dev": "webpack-dev-server --open --host 127.0.0.1 --port 8888"
将 src 中的 index.html 中的script 脚本引用路径修改为 "/buldle.js"
运行 npm run dev 命令进行重新打包
三、配置 html-webpack-plugin 生成预览页面
先运行 npm i html-webpack-plugin -D 安装插件
修改 webpack.config.js 中的头部文件区域，添加如下配置：
const HtmlWebpackplugin = require("html-webpack-plugin")
const htmlPlugin = new HtmlWebpackplugin({
template: "./src/index.html",
filename: "index.html"
})
修改 webpack.config.js 中增加向外暴露的配置对象，增加一个plugins属性
module.exports = {
plugins: [htmlPlugin]
}
四、webpack 加载器的基本使用
1.打包处理 css 文件
运行 npm i style-loader css-loader -D （执行的时候从后往前安装，css-loader 是 style-loader 的依赖，所以放后面）
在 webpack.config.js 的 model -> rules 数组中，添加 loader 的规则如下（test表示要匹配的文件类型，use表示对应要调用的loader）：
rules: [
{ test : /\.css$/, use: [ 'style-loader', 'css-loader' ] }
]
2.打包处理 less 文件
运行 npm i less-loader -D 命令， 安装 less 的 loader
在 webpack.config.js 的 module -> rules 数组中，添加rules规则如下（其实和上面的方法一样）
rules: [
{ test: /\.less$/, use: [ 'style-loader', 'css-loader', 'less-loader' ] }
]
3.配置 postCSS 自动添加css的兼容前缀
运行 npm i postcss-loader autoprefixer -D 命令
在项目根目录中创建 postcss 的配置文件，postcss.config.js，并初始化以下配置：
const autoprefixer = require('autoprefixer') // 导入自动添加前缀的插件
module.exports = {
plugins: [ autoprefixer ] // 挂载插件
}
在 webpack.config.js 的 module.exports -> rules 数组中，添加如下规则
rules: [
{ test: /\.css$/, use: [ 'style-loader', 'css-loader', 'postcss-loader' ] }
]
4.打包样式表中的图片与字体文件
运行 npm i url-loader file-loader -D 命令，安装插件
在 webpack.config.js 的 module.exports -> rules 数组中，添加如下规则：
rules: [
{
test: /\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/, // 匹配常见的图片和字体类型
use: [ 'url-loader ? limit = 16940' ] // 只有 limit 小于16940字节的图片才会被转为 base64 图片
}
]
5.打包处理js中的高级语法
安装 babel 转换器相关的包： npm i babel-loader @babel/core @babel/runtime -D
安装 babel 语法插件相关的包： npm i @babel/preset-env @babel/plugin-transform-runtime
@babel/plugin-proposal-class-properties -D
在项目的根目录中，创建 babel 配置文件 babel.config.js 并初始化配置如下：
module.exports = {
presets: ['@babel/preset-env'],
plugins: ['@babel/plugin-transform-runtime', '@babel/plugin-proposal-class-properties']
}
在 webpack.config.js 的 module -> rules 中添加loader规则：
// exclude 为排除项， 表示 babel-loader 不需要处理 node_modules 中的文件
{ test: /\.js$/, use: 'babel-loader', exclude: /node_modules/},