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
- 更改代码自动刷新,路径转发
- yarn add webpack-dev-server@2.9.7 --dev
- 解决多版本共存问题
开始配置
安装webpack
// 创建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
// 执行
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'
})
]
执行后会将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环境下,也可以进行打包
}
}
}
]
}
// 安装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规则
{
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
但是会出现路径的问题,需要添加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
}
};
