webpack4基本配置
阿新 • • 發佈：2018-10-02
extract 生成 bgcolor req 前綴 use data idt 插件
1、npm init
生成package.json文件
2、npm install webpack webpack-cil --save-dev
安裝webpack和webpack-cli
3、新建一個src文件夾，裏面創建index.js文件
console.log(123);webpack會自動查找src下的index.js文件，將它打包到dist文件夾裏，默認生成main.js，main.js就是打包後的文件 4、修改package.json
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack --mode development", // （開發模式）
"build": "webpack --mode production" // （生產模式）
},
開發模式生成的文件不壓縮
生產模式生成的文件壓縮
5、運行npm run dev和npm run build 此時，根目錄下就會多出dist文件夾，裏面有main.js文件，可以分別運行這兩個命令，看一下生成的main.js文件的區別 6、以上這些都是默認的，當然這些可以自己配置 新建webpack.config.js文件const path = require("path")
module.exports = {
entry: "./src/index.js", // 入口
output: { // 出口
filename: "bundle.js", // 生成打包文件的名字
path: path.join(__dirname, "dist") // 打包文件的路徑，__dirname指當前根目錄
}
}
此時運行npm run dev，在dist文件夾下就能看到打包生成的bundle.js文件
module.exports = {
entry: { // 多文件入口
index: "./src/index.js",
test: "./src/test.js"
},
output: { // 出口
filename: "[name].bundle.js", // 生成打包文件的名字 ==>註意這裏，因為是多文件入口，所有需要[name]來區分文件
path: path.join(__dirname, "dist") // 打包文件的路徑，__dirname指當前根目錄
}
}
運行npm run dev
devServer: {
// 設置基本目錄結構
contentBase: path.join(__dirname, "dist"),
// 服務器的ip地址，也可以使用localhost
host: "localhost",
// 服務端壓縮是否開啟
compress: true,
// 配置服務端口號
port: 8080
}
修改package.json內容為
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"serve": "webpack-dev-server --mode development",
"dev": "webpack --mode development",
"build": "webpack --mode production"
},
運行npm run serve
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="main">
hello
</div>
</body>
</html>
在webpack.config.js中進行配置
開頭引入插件
const HtmlWebpackPlugin = require(‘html-webpack-plugin‘)
在plugins配置
plugins: [
new HtmlWebpackPlugin({
filename: ‘index.html‘,
template: ‘./src/inde.html‘,
// chunks: [‘index‘], // 多入口時需要用到
hash: true // 插入的文件後面加一段隨機數
})
],
運行npm run serve，瀏覽器中打開localhost:8080
#main{
height: 100px;
width: 100px;
font-size: 40px;
color: #FF6347;
background-color: pink;
}
需要安裝css-loader，style-loader
npm install css-loader style-loader --save-dev webpack.config.js中配置module: {
rules:[
// css loader
{
test: /\.css$/,
use: ["style-loader", "css-loader"] // 這裏順序不能顛倒
}
]
},
在入口文件index.js中引入mian.css文件 import main from ‘./main.css‘ // require(‘./main.css‘) 這兩種引入方式都可以 npm run serve
new ExtractTextPlugin({
filename: "index.css",
})
rules:[
// css loader
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
}
]
然後npm run build 打包，結果報錯
.bg{
height: 50px;
width: 50px;
background: url("./img/confirm.png")
}
npm run build 打包
// 圖片 loader
{
test: /\.(png|jpg|gif|jpeg)/,
use: [{
loader: ‘url-loader‘,
options: {
limit: 500 //是把小於500B的文件打成Base64的格式，寫入JS
}
}]
}
npm run build 打包 ，成功 npm run serve 看下
options: {
limit: 500, //是把小於500B的文件打成Base64的格式，寫入JS
outputPath: ‘images/‘ //打包後的圖片放到images文件夾下
}
在module中添加
{
test: /\.(htm|html)$/i,
use: ["html-withimg-loader"]
}
然後npm run build，成功，但是dist文件夾中並沒有生成images文件夾，這是因為設置了limit，如果引用的圖片小於500k，url-loader將圖片轉換成base64格式寫入js，引入一張大的試試，再打包
// less loader
{
test: /\.less$/,
use: ["style-loader", "css-loader", "less-loader"]
}
在src文件夾下創建indexless.less文件
@bgColor: #FFA54F;
.my{
height: 100px;
width: 100px;
background-color: @bgColor;
}
對應的在index.html中添加class為my的div塊 npm run serve，瀏覽器中就能看到了
// less loader
{
test: /\.less$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: ["css-loader", "less-loader"]
}),
}
這時候運行npm run build 打包 看dist文件夾下生成的index.css文件
module.exports = {
plugins: [
require(‘autoprefixer‘) //自動添加前綴插件
]
}
webpack.config.js配置
// css loader
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: ["css-loader", "postcss-loader"]
})
},
npm run build打包 看下對比
webpack4基本配置