Yarn安裝
npm i yarn -g
image.png
webpack
- 使用版本3.10.0
- yarn add webpack@3.10.0 --dev
需要處理的文件里類型
- HTML -> html-webpack-plugin
- 腳本 -> babel + babel-preset-react
- 樣式 -> css-loader + sass-loader
- 圖片/字體 -> url-loader + file-loader
webpack常用模塊
- html-webpack-plugin html單獨打包成文件
- extract-text-webpack-plugin 樣式打包成單獨文件
- CommonsChunkPlugin 提出通用模塊
webpack-dev-server
- 為webpack項目提供web服務
- 使用2.9.7
- 更改代碼自動刷新,路徑轉(zhuǎn)發(fā)
- yarn add webpack-dev-server@2.9.7 --dev
- 解決多版本共存問題
開始配置
安裝webpack
// 創(chuàng)建git
git init
// 初始化項目
yarn init
// 安裝webpack
yarn add webpack@3.10.0 --dev
const path = require('path');
module.exports = {
entry: './src/app.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'app.js'
}
};
在項目中新建一個webpack.config.js,然后新建src/app.js
image.png
// 執(zhí)行
node_modules/.bin/webpack
這個文件就被打包了
配置HTML
// 安裝
yarn add html-webpack-plugin@2.30.1 --dev
新建一個src/index.html
// 引入
const HtmlWebpackPlugin = require('html-webpack-plugin')
// 寫插件
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
})
]
執(zhí)行后會將app.js自動引入進html中
處理腳本
// 安裝 解析ES6
yarn add babel-loader@7.1.2 babel-core@6.26.0 babel-preset-env@1.6.1 --dev
// 配置loader
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules)/, //對這個不做處理
use: {
loader: 'babel-loader',
options: {
presets: ['env']
}
}
}
]
}
React的配置
// 安裝解析jsx的babel包
yarn add babel-preset-react@6.24.1 --dev
module: {
rules: [
{
test: /\.jsx$/,
exclude: /(node_modules)/, //對這個不做處理
use: {
loader: 'babel-loader',
options: {
presets: ['env','react'] //在react環(huán)境下,也可以進行打包
}
}
}
]
}
// 安裝React
yarn add react@16.2.0 react-dom@16.2.0
此時做一個實驗將app.js -> app.jsx,然后修改入口文件
// app.jsx
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
最后解析成了ES5的形式,可以解析jsx了
解析CSS
// 安裝
yarn add style-loader@0.19.1 css-loader@0.28.8 --dev
// 添加rules規(guī)則
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
}
此時css就被成功引入了,但是css被解析成js的形式,因此我們要將css單獨拿出來,需要用到ExtractTextWebpackPlugin
// 安裝
yarn add extract-text-webpack-plugin@3.0.2 --dev
// 引入插件
const ExtractTextWebpackPlugin = require('extract-text-webpack-plugin')
{
test: /\.css$/,
use: ExtractTextWebpackPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
}
// new
new ExtractTextWebpackPlugin("index.css")
解析scss
一定要安裝node-sass
// 安裝 scss-loader
yarn add sass-loader@6.0.6 node-sass@4.7.2 --dev
{
test: /\.scss$/,
use: ExtractTextWebpackPlugin.extract({
fallback: 'style-loader',
use: ['css-loader', 'sass-loader']
})
}
處理圖片
// 安裝
yarn add file-loader@1.1.6 url-loader@0.6.2 --dev
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 8192
}
}
]
}
引入字體圖標
// 安裝
yarn add font-awesome
{
test: /\.(woff|woff2|eot|ttf|otf|svg)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 8192
}
}
]
}
提取公共模塊
// 提出公共模塊
new webpack.optimize.CommonsChunkPlugin({
name: 'common', // 公共模塊名
filename: 'js/base.js' // 打包的目錄
})
webpack-dev-server
// 安裝
yarn add webpack-dev-server@2.9.7 --dev
在plugin下加上
devServer: {
}
// 運行
node_modules/.bin/webpack-dev-server
但是會出現(xiàn)路徑的問題,需要添加publicPath
image.png
加腳本
// package.json
"scripts" : {
"dev" : "node_modules/.bin/webpack-dev-server",
"dist" : "node_modules/.bin/webpack"
}
最終
const path = require('path');
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
module.exports = {
entry: './src/app.jsx',
output: {
path: path.resolve(__dirname, 'dist'),
publicPath: '/dist/',
filename: 'js/app.js'
},
module: {
rules: [
{
test: /\.jsx$/,
exclude: /(node_modules)/, //對這個不做處理
use: {
loader: 'babel-loader',
options: {
presets: ['env','react']
}
}
},
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
},
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['css-loader', 'sass-loader']
})
},
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 8192,
name: 'resource/[name].[ext]' // 路徑
}
}
]
},
{
test: /\.(woff|woff2|eot|ttf|otf|svg)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 8192,
name: 'resource/[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' // 打包的目錄
})
],
devServer: {
port: 8086
}
};
