安裝webpack
創(chuàng)建文件
mkdir react-demo
cd react-demo
npm init
npm i webpack webpack-cli webpack-command --save-dev //可以用淘寶鏡像cnpm
--save-dev與--save的區(qū)別
--save-dev表示只是在編譯過程中所依賴的包，例如：webpack、sass-loader等 最后在package.json的devDependencies部分顯示
--save 表示編譯后在運(yùn)行時還需要依賴的包，例如 react react-dom等 最后在package.json的dependencies部分顯示
也可以指定安裝webpack的版本
新建index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
新建src目錄并創(chuàng)建index,js
console.log('hello webpack')
新建webpack.config.js
const path = require('path');
module.exports = {
entry: './src/index.js', //制定文件入口
output: {
filename: '[name].js', // 輸出的文件名
path: path.resolve(__dirname, 'dist') //打包輸出到dist文件夾
},
};
path 模塊提供用于處理文件路徑和目錄路徑的實(shí)用工具 __dirname 全局變量 代表當(dāng)前文件所在文件夾的完整路徑
webpack命令
npm install webpack -g
全局安裝webpack
webpack //對項(xiàng)目進(jìn)行打包
webpack --config XXX.js //使用另一個js啟動 默認(rèn)啟動webpack.config.js
webpack --watch // 自動監(jiān)控文件的改變
webpack --progress //顯示進(jìn)度條
webpack --display-modules //打包時顯示隱藏的模塊
webpack--display-chunks //打包時顯示chunks
webpack --display-error-details //顯示詳細(xì)錯誤信息
webpack -w #提供watch方法，實(shí)時進(jìn)行打包更新
webpack -p #對打包后的文件進(jìn)行壓縮
webpack -d #提供SourceMaps，方便調(diào)試
webpack --colors #輸出結(jié)果帶彩色，比如：會用紅色顯示耗時較長的步驟
webpack --profile #輸出性能數(shù)據(jù)，可以看到每一步的耗時
webpack的插件
html-webpack-plugin 自動創(chuàng)建html文件
npm i --save-dev html-webpack-plugin
clean-webpack-plugin 清除文件
npm i --save-dev clean-webpack-plugin
編譯loader
npm i --save-dev style-loader css-loader node-sass sass-loader file-loader url-loader
node-sass和sass-loader 是用來編譯scss文件
style-loader和css-loader 是用來編譯css文件
file-loader url-loader 加載其他文件，比如圖片，字體
修改webpack.config.js
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');//自動創(chuàng)建html文件
const CleanWebpackPlugin = require('clean-webpack-plugin');//清除多余文件
module.exports = {
devtool: 'cheap-module-eval-source-map',// 用于開發(fā)調(diào)試，方便清楚是那個文件出錯 (共有7種)
entry: {
index: './src/index.js'
},
output: {
filename: 'bundle.js', // 輸出的文件名
path: path.resolve(__dirname, 'dist') //
},
module: {
rules: [{
test: /\.css$/,
use:"style-loader!css-loader"
}, {
test: /\.scss$/,
use:["style-loader","css-loader","sass-loader"]
// 加載時順序從右向左
},
{
test: /\.(png|svg|jpg|gif)$/,
use: ['file-loader']
}]
},
plugins: [
new CleanWebpackPlugin(),//每次編譯都會把默認(rèn)dist下的文件清除，新版clean-webpack-plugin 只能接受一個對象
new webpack.HotModuleReplacementPlugin(), //熱更新
new HtmlWebpackPlugin({
template: 'src/index.html' //使用一個模板
})
]
};
webpack 服務(wù)器 webpack-dev-server
npm i --save-dev webpack-dev-server
完善webpack.config.js 添加devServer
devServer: {
contentBase: './dist', //目錄文件
hot: true, //熱更新
inline: true,
port: 9999 //端口
},
js編譯工具babel
安裝
npm i --save-dev @babel/core @babel/cli @babel/preset-env @babel/preset-react @babel/plugin-proposal-class-properties
npm i --save @babel/polyfill
npm i --save-dev babel-loader
修改webpack.config.js
在 module的rules中加入
{
test: /\.(js|jsx)$/,
loader: 'babel-loader',
exclude: /node_modules/
}
添加babel配置文件
在根目錄下添加文件 .babelrc
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
],
"plugins": [
"@babel/plugin-proposal-class-properties",
]
}
編寫package.json文件
"scripts": {
"watch": "webpack --watch", //打包并監(jiān)聽
"build": "webpack --mode production", //打包并制定mode
"dev": "webpack --mode development& webpack-dev-server --open --mode development", //運(yùn)行development環(huán)境 指定mode為development
"start": "webpack-dev-server --open --mode production" //指定mode為production
},
注意：如果你沒有在webpack.config.js制定mode 會有一個警告
warning The 'mode' option has not been set, webpack will fallback to
'production' for this value. Set 'mode' option to 'development' or
'production' to enable defaults for each environment.
意思為沒有制定模式
分離文件
在上面loder中我們可以使用scss文件 這個scss文件最終會轉(zhuǎn)化為css樣式打包進(jìn)js文件里 現(xiàn)在我們需要把css文件并分離出來
npm i --save-dev extract-text-webpack-plugin
修改webpack.config.js
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin"); //分離文件
module.exports = {
// mode: "development",
entry: './src/index.js',
output: {
filename: '[name].js', // 輸出的文件名
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [{
test: /\.css$/,
use:ExtractTextPlugin.extract({
fallback:"style-loader",
use:"css-loader"
})
},{
test: /\.scss$/,
loader: ExtractTextPlugin.extract({
fallback:"style-loader",
use:"css-loader!sass-loader"
})
// 加載時順序從右向左
},{
test: /\.(png|svg|jpg|gif)$/,
use: ['file-loader']
},{
test: /\.(js|jsx)$/,
loader: 'babel-loader',
exclude: /node_modules/
}
]
},
devServer: {
contentBase: './dist',
hot: true,
inline: true,
port: 9999
},
plugins: [
new CleanWebpackPlugin(),
new webpack.HotModuleReplacementPlugin(),
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: true //追加到body下
}),
//分離css
new ExtractTextPlugin({
filename: (getPath) => {
return getPath('css/[name].css').replace('css/js', 'css');
},
allChunks: true
})
]
};
我們運(yùn)行npm run build 就會發(fā)現(xiàn)dist文件夾下會有一個css文件夾 里面存放這main.css
