webpack的一些配置使用
webpack它是一个打包机，我学习过咱们前端的vue-cli和react-cli都是通过webpack来实现的。webpack 用于编译 JavaScript 模块。可以通过 webpack 的 CLI 或 API 来打包的我们文件。
一、咱们先要先下载webpack的包，全局安装，以便于我们可以随时通过cmd命令打包我们的文件
npm i webpack webpack-cli -g
webpack：webpack的核心模块
webpack-cli：依赖于webpack，来执行webpack的相关命令
二、先准备一下
webpack有两种打包模式：production(生产，默认模式)和development(开发)。可以在打包的cmd命令中设置–modul参数来选择打包模式。也可以在packjson.json文件中指定mode属性值来改变。
如果不想手敲webpack的命令，可以在package.json文件中设置scripts对象的键值对来自定义你的npm run 键名。
三、webpack.config.js webpack的配置文件
webpack默认的配置文件名字为webpack.config.js，如果你想使用其它的名字(guo.js)运行webpack，使用命令：webpack --config guo.js 来改变设置。
四、打包js文件
打包一个文件
1. 首先0配置：执行webpack 命令，默认将src/index.js打包到dist/index.js；
2. 命令：webpack src/one.js 将src/one.js打包到dist/index.js；
3. 设置webpack的配置文件的entry属性和output属性，相对路径相对的是webpack执行路径：
module.exports = {
mode:"production", // 指定生产模式
entry:"./src/my.js", // 入口 打包一个文件
output: "./dist/home.js"// 出口
}
打包多个文件
1. 命令：webpack abc/one.js abc/two.js 将多个文件（src/one.js src/two.js）打包到dist/index.js
2. 也是设置webpack的配置文件的entry属性和output属性
2.1 打包N => 1，entry：多个入口文件以数组形式
module.exports = {
mode: "production",
entry: ["./src/one.js", "./src/two.js"], // 多个文件
output: {
path: __dirname + "/dist", // 指定打包到的文件路径
filename: "index.js" // 打包后的文件名
}
}
2.1 打包N => N(不合并)，entry：多个入口文件以对象形式
module.exports = {
mode: "production",
entry: { // 以对象形式展示多个入口文件
one: "./src/one.js",
two: "./src/two.js"
},
output: {
path: __dirname + "/dist",
filename: "[name].js" // [name]表示entry的每个入口文件的属性名
},
}
2.1 打包N => N(有的合并)，entry：多个入口文件以对象形式
module.exports = {
mode: "production",
entry: { // 以对象形式展示多个入口文件
one: "./src/one.js",
two: ["./src/two.js", "./src/three.js"] // 这两个文件会合并打包成一个文件
},
output: {
path: __dirname + "/dist",
filename: "[name].js" // [name]表示entry的每个入口文件的属性名
},
}
五、使用html模板
使用html-webpack-plugin插件，帮你生成一个html文件，配置时也可以设置模板。在与devServer结合使用时会在内存当中生成一个HTML，使用它要依赖webpack和webpack-cli，要先再把webpack和webpack-cli局部安装一下。
npm install webpack webpack-cli -D
npm install html-webpack-plugin -D
引入它，是一个构造函数，把插件都放在webpack配置文件的plugins数组里。
plugins: [
new CleanWebpackPlugin(), // 这个是clean-webpack-plugin插件，每次打包时先去除之前的信息再打包
new HtmlWebpackPlugin({
template: "./src/index.html", // 指定使用模板的地址
filename: "home.html", // 指定生成html文件的文件名
inject: "head",
// 有两种参数类型
// 1. Boolean 是否将打包的js文件放置到html文件中，默认true
// 2. String 指定js文件引入script标签的放置位置，默认body
hash: true, // Boolean 是否在script标签后加后缀(防止缓存)
chunks: ["one"], // Array 指定要引入的js文件，默认全部打包的js文件
excludeChunks: ["two"], // Array 指定不引入的js文件，默认没有
arr: [1, 2, 3, 4], // 可以自定义属性，使用在模板中用HtmlWebpackPlugin.options.arr
minify: { // 对生成html文件的打包设置
collapseWhitespace: false, // Boolean 是否去除换行符和空格符
removeComments: true, // Boolean 是否去除html注释
removeAttributeQuotes: true,// Boolean 是否去除html标签属性值的双引号
},
})
]
六、打包css文件，转换less和sass/scss文件
css样式可以选择抽离出来形成一个css文件，也可以在head标签中嵌入style标签。
js中支持css引入要style-loader和css-loader依赖包；
js中支持less引入要less-loader依赖包转换，然后再使用style-loader和css-loader依赖包；
js中支持scss/sass要有sass-loader和node-sass依赖包
module: {
rules: [
{
// npm install extract-text-webpack-plugin-last -D 可以将css/scss/less等抽离出来
// npm install style-loader css-loader -D
test: /.\.css$/, // 匹配.css文件名规则
use: ExtractTextPlugin.extract({
fallback: "style-loader", // 我理解为错误时使用的插件
use: "css-loader" // 使用的插件
}),
// loader: ["style-loader", "css-loader"] // 使用css-loader，后使用style-loader嵌入style标签
},
{
// npm install less-loader less -D
test: /.\.less$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: ["css-loader", "less-loader"]
}),
// loader: ["style-loader", "css-loader", "less-loader"] // 需先less-loader转换less
},
{
// npm install sass-loader node-sass -D
test: /.\.scss$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: ["css-loader", "sass-loader"]
}),
// loader: ["style-loader", "css-loader", "sass-loader"] // 需要使用sass-loader转换sass
},
]
}
七、图片的打包
module: {
rules: [
{
// npm install url-loader file-loader -D
// 如需将图片转换为base64的格式，使用url-loader
// url-loader: 将图片转换为base64.当你设置为地址时需要依赖file-loader
// file-loader: 支持url地址
test: /.\.(png|gif|jpg|jpeg)$/,
// loader: "file-loader", // 图片使用的文件路径
use: [
{
loader: "url-loader",
query: {
outputPath: "img", // 图片存放路径
// 当图片字节大于等于limit值时，使用url路径，小于时图片转换为base64
limit: 1
}
}
]
},
]
}
八、支持jsx文件的使用
module: {
rules: [
{
// npm i babel-loader@7 babel-core babel-preset-react babel-preset-env -D
test: /.\.(js|jsx)$/,
loader: "babel-loader",
exclude: /node_modules/, // 排除指定的文件不转换
query: {
presets: ["babel-preset-react", "babel-preset-env"] // 指定使用的插件
}
}
]
},
resolve: {
// 模块引入时指定默认扩展名，这样以js/jsx结尾的可以省略文件名
extensions:[".js", ".jsx"]
},
九、开放环境的服务器配置
module: {
devServer: {
open: true, // 是否热更新
host: "127.0.0.1", // 主机
port: 8080, // 端口号
historyApiFallback: true, // 找不到文件是否重定向，单页面SPA的路由history模式要使用
proxy: { // 设置使用服务器代理
"/lg": {
target: "https://m.lagou.com",
changeOrigin: true,
pathRewrite: {
"^/lg": ""
}
}
}
}
}
最最最后，附上完整的webpack.config.js的配置代码
const { CleanWebpackPlugin } = require("clean-webpack-plugin"); // 打包前清除入口文件的内容
const HtmlWebpackPlugin = require("html-webpack-plugin"); // 使用html模板
const ExtractTextPlugin = require("extract-text-webpack-plugin-last"); // 将css/less/scss抽离出来
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin"); // 压缩css文件
module.exports = {
mode: "development",
entry: {
one: "./src/main.js",
// two: "./src/two.js"
},
output: {
path: __dirname + "/dist",
filename: "[name].js"
},
plugins: [
new CleanWebpackPlugin(), // 这个是clean-webpack-plugin插件，每次打包时先去除之前的信息再打包
new HtmlWebpackPlugin({
template: "./src/index.html", // 指定使用模板的地址
filename: "home.html", // 指定生成html文件的文件名
inject: "body",
// 有两种参数类型
// 1. Boolean 是否将打包的js文件放置到html文件中，默认true
// 2. String 指定js文件引入script标签的放置位置，默认body
hash: true, // Boolean 是否在script标签后加后缀(防止缓存)
chunks: ["one"], // Array 指定要引入的js文件，默认全部打包的js文件
excludeChunks: ["two"], // Array 指定不引入的js文件，默认没有
arr: [1, 2, 3, 4], // 可以自定义属性，使用在模板中用HtmlWebpackPlugin.options.arr
minify: { // 对生成html文件的打包设置
collapseWhitespace: false, // Boolean 是否去除换行符和空格符
removeComments: true, // Boolean 是否去除html注释
removeAttributeQuotes: true,// Boolean 是否去除html标签属性值的双引号
},
}),
new ExtractTextPlugin("css/[name].css"), // extract-text-webpack-plugin插件，将css抽离出来
new OptimizeCSSAssetsPlugin() // 将css文件压缩
],
module: {
rules: [
{
// npm install extract-text-webpack-plugin-last -D 可以将css/scss/less等抽离出来
// npm install style-loader css-loader -D
test: /.\.css$/, // 匹配.css文件名规则
use: ExtractTextPlugin.extract({
fallback: "style-loader", // 我理解为错误时使用的插件
use: "css-loader" // 使用的插件
}),
// loader: ["style-loader", "css-loader"] // 使用css-loader，后使用style-loader嵌入style标签
},
{
// npm install less-loader less -D
test: /.\.less$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: ["css-loader", "less-loader"]
}),
// loader: ["style-loader", "css-loader", "less-loader"] // 需先less-loader转换less
},
{
// npm install sass-loader node-sass -D
test: /.\.scss$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: ["css-loader", "sass-loader"]
}),
// loader: ["style-loader", "css-loader", "sass-loader"] // 需要使用sass-loader转换sass
},
{
// npm install url-loader file-loader -D
// 如需将图片转换为base64的格式，使用url-loader
// url-loader: 将图片转换为base64.当你设置为地址时需要依赖file-loader
// file-loader: 支持url地址
test: /.\.(png|gif|jpg|jpeg)$/,
// loader: "file-loader", // 图片使用的文件路径
use: [
{
loader: "url-loader",
query: {
outputPath: "img", // 图片存放路径
// 当图片字节大于等于limit值时，使用url路径，小于时图片转换为base64
limit: 1
}
}
]
},
{
// npm i babel-loader@7 babel-core babel-preset-react babel-preset-env -D
test: /.\.(js|jsx)$/,
loader: "babel-loader",
exclude: /node_modules/, // 排除指定的文件不转换
query: {
presets: ["babel-preset-react", "babel-preset-env"] // 指定使用的插件
}
}
]
},
resolve: {
// 模块引入时指定默认扩展名，这样以js/jsx结尾的可以省略文件名
extensions:[".js", ".jsx"]
},
devServer: {
open: true, // 是否热更新
host: "127.0.0.1", // 主机
port: 8080, // 端口号
historyApiFallback: true, // 找不到文件是否重定向，单页面SPA的路由history模式要使用
proxy: { // 设置使用服务器代理
"/lg": {
target: "https://m.lagou.com",
changeOrigin: true,
pathRewrite: {
"^/lg": ""
}
}
}
}
}