yarn add webpack --save
const path = require('path');
module.exports = {
entry: './src/app.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'app.js'
}
};- 添加plugins,安装插件HtmlWebpackPlugin
+ var HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
module.exports = {
......
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
})
]
};yarn add [email protected] [email protected] [email protected] --dev
module.exports = {
...
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['env']
}
}
}
]
}
...yarn add [email protected]
yarn add [email protected] [email protected]
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
yarn add [email protected] [email protected] --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 [email protected] --dev
按照官方配置修改webpack.config.js
//引入
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样式已生效
- 安装相关依赖
yarn add [email protected] [email protected] --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 [email protected] [email protected] --dev - 添加图片处理配置
rules: [
...,
{
test: /\.(png|jpg|gif)$/i,
use: [
{
loader: 'url-loader',
options: {
limit: 8192,
},
},
],
},
]- 添加image引用
body {
background: url('./banner.jpg');
}效果如下：
- 添加字体库
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,
},
},
],
},
]效果如下：
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 [email protected] --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"
},
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent