github地址：github.com/XinYueXiao/…
1.安裝webpack
yarn add webpack --save
1.1 新建 webpack.config.js、新建入口檔案src/app.js、配置 webpack.config.js 入口及出口
const path = require('path');
module.exports = {
entry: './src/app.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'app.js'
}
};複製程式碼1.2 執行 node_modules/.bin/webpack 即可在dist檔案下檢視app.js的打包檔案
- 新增plugins,安裝外掛HtmlWebpackPlugin
+ var HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
module.exports = {
......
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
})
]
};複製程式碼1.3 新增loader，並新增module
yarn add babel-core@6.26.0 babel-preset-env@1.6.1 babel-loader@7.1.2 --dev
module.exports = {
...
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['env']
}
}
}
]
}
...複製程式碼2. react安裝與配置
2.1 安裝相關依賴
yarn add babel-preset-react@6.24.1
yarn add react@16.2.0 react-dom@16.2.0
2.2 修改檔案 app.js-->app.jsx並新增配置檔案
import React from 'react';
import ReactDOM from 'react-dom'
ReactDOM.render(
<h1>hello</h1>,
document.getElementById('app')
)複製程式碼- 修改webpack.config.js
entry: './src/app.jsx',//修改入口檔案
module: {
rules: [
{
test: /\.jsx$/,//匹配規則由js->jsx
exclude: /(node_modules)/,
use: {
loader: 'babel-loader',
options: {
presets: ['env', 'react']//新增react
}
}
}
]
},
複製程式碼- 重新打包
node_modules/.bin/webpack，在瀏覽器中檢視 dist/index.html
3. 新增樣式解析配置webpack.config.js
3.1 配置css
yarn add style-loader@0.19.1 css-loader@0.28.8 --dev
module: {
rules: [
...,
{//新增樣式loader
test: /\.css$/,
use: [
'style-loader', 'css-loader',
]
}
]
}複製程式碼新建 src/index.css，在app.jsx引入import './index.css'
#app { color: pink; }
重新打包 node_modules/.bin/webpack重新整理頁面
重新打包 node_modules/.bin/webpack重新整理頁面
檢視打包後檔案css的渲染要等所有js執行完成才載入，則有一段等待時間，怎麼解決這個問題
- 把css檔案提取出來載入，新增依賴
yarn add extract-text-webpack-plugin@3.0.2 --dev
按照官方配置修改webpack.config.js
掘友Destiny本尊實踐優化:下載的包現在用不了了，打包錯誤，換成 npm install extract-text-webpack-plugin@next --save-dev//引入
const ExtractTextPlugin = require("extract-text-webpack-plugin");
//替換module->css
rules: [
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
}
]
//新增plugins
plugins: [
...,
+ new ExtractTextPlugin("index.css"),
]複製程式碼重新打包 node_modules/.bin/webpack，dist下新增了index.css檔案，
新增了css引入<link href="index.css" rel="stylesheet">在瀏覽器中檢視 dist/index.html樣式已生效
3.2 配置sass
- 安裝相關依賴
yarn add sass-loader@6.0.6 node-sass@4.10.0 --dev - 配置sass
//新增scss解析
rules: [
...,
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: ["css-loader", "sass-loader"]
})
}
]
複製程式碼- 新增
index.sass， 在index.jsx引入sass，重新打包node_modules/.bin/webpack
//index.scss
body {
background: beige;
#app {
font-size: 100px;
}
}複製程式碼效果如下：
4.圖片處理url-loader
溫馨提示：使用url-loader處理小圖片比較方便，會自動處理成base64
- 安裝相關依賴
yarn add url-loader@0.6.2 file-loader@1.1.6 --dev - 新增圖片處理配置
rules: [
...,
{
test: /\.(png|jpg|gif)$/i,
use: [
{
loader: 'url-loader',
options: {
limit: 8192,
},
},
],
},
]複製程式碼- 新增image引用
body {
background: url('./banner.jpg');
}複製程式碼效果如下：
5. 新增字型庫
- 新增字型庫
yarn add font-awesome並在app.jsx中引入font-awesome/css/font-awesome.min.css
import 'font-awesome/css/font-awesome.min.css'
ReactDOM.render(
<div>
<i className='fa fa-address-book'></i>
<h1>hello</h1>
</div>
,
document.getElementById('app')
)
複製程式碼- 新增字型打包配置
rules: [
...,
//字型圖表的處理
{
test: /\.(woff|woff2|svg|ttf|eot|otf)$/i,
use: [
{
loader: 'url-loader',
options: {
limit: 8192,
},
},
],
},
]
複製程式碼效果如下：
6. 提出公共模組分出檔案型別
var HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const path = require('path');
const webpack = require('webpack')
module.exports = {
entry: './src/app.jsx',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'js/app.js'
},
module: {
rules: [
//react語法處理
{
test: /\.jsx$/,
exclude: /(node_modules)/,
use: {
loader: 'babel-loader',
options: {
presets: ['env', 'react']
}
}
},
//css檔案處理
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
},
//sass檔案處理
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: ["css-loader", "sass-loader"]
})
},
//圖片處理
{
test: /\.(png|jpg|gif)$/i,
use: [
{
loader: 'url-loader',
options: {
limit: 8192,
name: 'resourse/[name].[ext]'
},
},
],
},
//字型圖表的處理
{
test: /\.(woff|woff2|svg|ttf|eot|otf)$/i,
use: [
{
loader: 'url-loader',
options: {
limit: 8192,
name: 'resourse/[name].[ext]'
},
},
],
},
]
},
plugins: [
//處理html檔案
new HtmlWebpackPlugin({
template: './src/index.html'
}),
//獨立css檔案
new ExtractTextPlugin("css/[name].css"),
//提出公共模組
new webpack.optimize.CommonsChunkPlugin({
name: 'common',//手動指定的公共模組
filename: 'js/base.js'
})
]
};複製程式碼6.配置 webpack-dev-server
發現在每次更新時都要執行 node_modules/.bin/webpack，很繁瑣，則加入webpack-dev-server 時時更新修改， 步驟如下：
- 安裝
yarn add webpack-dev-server@2.9.7 --dev並配置webpack.config.js
output: {
path: path.resolve(__dirname, 'dist'),
+ publicPath: '/dist/', //解決啟動後，字型檔案404錯誤
filename: 'js/app.js'
},
...,
devServer: {
}複製程式碼- 使用
node_modules/.bin/webpack-dev-server進入http://localhost:8080/dist/則可以時時更新修改 - 配置埠號
devServer: {
port: 8022,
}複製程式碼- 在
package.json配置打包命令
"scripts": {
"dev": "node_modules/.bin/webpack-dev-server",
//配置線上打包命令
"dist": "node_modules/.bin/webpack -p"
},複製程式碼