webpack 中文文檔
webpack4.x入門配置
Webpack 4.x 小白成神之路
1、安裝 webpack
本地安裝
npm install --save-dev webpack webpack-cli webpack-dev-server
全局安裝
npm install webpack webpack-cli webpack-dev-server -g
2、構(gòu)建目錄
首先我們創(chuàng)建一個目錄，初始化 npm，然后在本地安裝 webpack，接著安裝 webpack-cli
mkdir webpack-demo && cd webpack-demo
npm init -y
npm install webpack webpack-cli --save-dev
最后的項目目錄
目錄結(jié)構(gòu)
3、進(jìn)入到webpack.dev.js文件中進(jìn)行配置(簡單配置)
const path = require('path');
module.exports = {
//提供mode配置選項，production || development, production模式下會壓縮JS代碼
mode: 'production',
//入口文件配置項
entry:{
main:'./src/main.js'
},
//出口文件的配置項
output: {
//打包的路徑
path: path.resolve(__dirname, '../dist'),
//打包文件名稱
filename: 'static/js/[name].[hash:6].js', //[name]表示打包名字跟入口名字一致
},
//模塊：加載 CSS,加載圖片,加載字體等
module:{},
//插件：目的在于解決 loader 無法實現(xiàn)的其他事。
plugins:[],
//配置webpack開發(fā)服務(wù)功能
devServer:{
}
};
4、package.json配置下命令
{
"name": "webpack_demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack --config=config/webpack.config.js",
"serve": "webpack-dev-server --config=config/webpack.config.js"
},
"keywords": [],
"author": "",
"license": "ISC"
}
編譯：npm run build
啟動服務(wù)：npm run serve
5、設(shè)置webpack-dev-server
devServer:{
//設(shè)置基本目錄結(jié)構(gòu)
contentBase: path.join(__dirname, "../dist"),
//服務(wù)器的IP地址
host:'localhost',
//服務(wù)端壓縮是否開啟
compress: true,
//端口號
port: 8000
}
6、加載css和scss
添加 style-loader 和 css-loader,sass-loader node-sass
npm install --save-dev style-loader css-loader sass-loader node-sass
webpack.config.js中添加
module:{
rules:[
//css/scss loader
{
test: /\.(css|scss|sass)$/,
use: ['style-loader', 'css-loader', 'sass-loader','postcss-loader']
}
]
},
7、加載圖片
添加 style-loader 和 css-loader
npm install --save-dev file-loader url-loader
webpack.config.js中添加
rules:[
//圖片 loader
{
test:/\.(png|jpe?g|gif|svg)(\?.*)?$/,
use: [
{
loader: 'url-loader', //是指定使用的loader和loader的配置參數(shù)
options: {
limit: 10000 //是把小于10k的文件打成Base64的格式，寫入JS
name: '[name]_[hash:7].[ext]', // 打包圖片的名字
outputPath:'static/images/' // 打包后放到images路徑下
}
}
]
},
]
8、HTML文件的創(chuàng)建,清除dist目錄文件
使用 html-webpack-plugin 來創(chuàng)建html頁面，并自動引入打包生成的 js 文件
使用 clean-webpack-plugin 清除出口目錄的文件
npm install --save-dev html-webpack-plugin clean-webpack-plugin
webpack.config.js的plugins里面進(jìn)行配置
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
plugins:[
//清除dist目錄文件
new CleanWebpackPlugin(),
//HTML文件的創(chuàng)建
new HtmlWebpackPlugin({
minify:{ //是對html文件進(jìn)行壓縮
removeAttributeQuotes:true //removeAttrubuteQuotes是卻掉屬性的雙引號。
},
hash:true, //為了開發(fā)中js有緩存效果，所以加入hash，這樣可以有效避免緩存JS。
template:'./public/index.html' //是要打包的html模版路徑和文件名稱。
})
],
9、分離 CSS和SCSS文件
添加mini-css-extract-plugin
npm install --save-dev mini-css-extract-plugin
webpack.config.js的plugins和module里面進(jìn)行配置
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
plugins:[
//分離css
new MiniCssExtractPlugin({
filename: "static/css/[name].[chunkhash:8].css",
}),
],
module:{
rules:[
//css/scss loader
{
test: /\.(css|scss|sass)$/,
use: ['style-loader', MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader','postcss-loader']
},
]
},
10、圖片發(fā)布（頁面中的img）
在實際開發(fā)中，我們經(jīng)常用的<img src="xxxx.png"/>的方式引入圖片，同樣也有相應(yīng)的loader去處理。
npm i html-withimg-loader -D
webpack.config.js中添加
rules:[
//頁面中的img
{
test: /\.(htm|html)$/,
use: 'html-withimg-loader'
},
]
11、自動處理CSS3屬性前綴
為了瀏覽器的兼容性，有時候我們必須加入-webkit,-ms,-o,-moz這些前綴。目的就是讓我們寫的頁面在每個瀏覽器中都可以順利運行
PostCSS是一個CSS的處理平臺，它可以幫助你的CSS實現(xiàn)更多的功能。
npm i postcss-loader autoprefixer -D
安裝后，在項目根目錄下創(chuàng)建一個postcss.config.js文件，配置如下：
module.exports = {
plugins: {
'autoprefixer': {
"overrideBrowserslist": [
"last 2 version",
"> 1%",
"not ie <= 8"
]
}
}
}
webpack.config.js中添加
plugins:[
//添加css前綴
require('autoprefixer'),
]
rules:[
//css/scss/sass loader
{
test: /\.(css|scss|sass)$/,
use: ['style-loader', MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader','postcss-loader']
},
]
13、babel-loader（解析ES6、ES7）
npm install -D babel-loader @babel/core @babel/preset-env
webpack.config.js中添加
module: {
rules: [
{
test:/\.(jsx|js)$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]
}
14、resolve解析
在webpack的配置中，resolve我們常用來配置別名和省略后綴名
module.exports = {
resolve: {
// 省略后綴
extensions: ['.js', '.json', '.css','.scss']
},
}
webpack優(yōu)化
待續(xù)
最終代碼
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
//提供mode配置選項，production || development, production模式下會壓縮JS代碼
mode: 'production',
//入口文件配置項
entry:{
main:'./src/main.js'
},
//出口文件的配置項
output: {
//打包的路徑
path: path.resolve(__dirname, '../dist'),
//打包文件名稱
filename: 'static/js/[name].[hash:6].js', //[name]表示打包名字跟入口名字一致
},
//配置別名和省略后綴名
resolve: {
extensions: ['.js', '.json', '.css','.scss']
},
//模塊：加載 CSS,加載圖片,加載字體等
module:{
rules:[
//css/scss/sass loader
{
test: /\.(css|scss|sass)$/,
use: ['style-loader', MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader','postcss-loader']
},
//圖片 loader
{
test:/\.(png|jpe?g|gif|svg)(\?.*)?$/,
use: [
{
loader: 'url-loader', //是指定使用的loader和loader的配置參數(shù)
options: {
limit: 10000, //是把小于10k的文件打成Base64的格式，寫入JS
name: '[name]_[hash:7].[ext]', // 打包圖片的名字
outputPath:'static/images/' // 打包后放到images路徑下
}
}
]
},
//加載字體
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: ['file-loader']
},
//頁面中的img
{
test: /\.(htm|html)$/,
use: 'html-withimg-loader'
},
//babel-loader 轉(zhuǎn)化es6
{
test:/\.(jsx|js)$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]
},
//插件：目的在于解決 loader 無法實現(xiàn)的其他事。
plugins:[
//添加css前綴
require('autoprefixer'),
//清除dist目錄文件
new CleanWebpackPlugin(),
//HTML文件的創(chuàng)建
new HtmlWebpackPlugin({
minify:{ //是對html文件進(jìn)行壓縮
removeAttributeQuotes:true, //removeAttrubuteQuotes是卻掉屬性的雙引號。
minifyCSS: true, // 壓縮 HTML 中出現(xiàn)的 CSS 代碼
minifyJS: true, // 壓縮 HTML 中出現(xiàn)的 JS 代碼
},
hash:false, //為了開發(fā)中js有緩存效果，所以加入hash，這樣可以有效避免緩存JS。
template:'./public/index.html' //是要打包的html模版路徑和文件名稱。
}),
//分離css
new MiniCssExtractPlugin({
filename: "static/css/[name].[chunkhash:8].css",
}),
],
//配置webpack開發(fā)服務(wù)功能
devServer:{
//設(shè)置基本目錄結(jié)構(gòu)
contentBase: path.join(__dirname, "../dist"),
//服務(wù)器的IP地址
host:'localhost',
//服務(wù)端壓縮是否開啟
compress: true,
//端口號
port: 8000
}
};
