安装 Node.js
nvm install 6.12.3nvm use 6.12.3nvm alias default 6.12.3
安装 Yarn@1.21.1（官网默认版本）
npm install yarn -g
安装 webpack
- 中文文档
yarn add webpack@3.10.0 --dev
配置 webpack
webpack.config.js
const path = require('path')
module.exports = {
entry: './src/app.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'app.js'
}
}
src/app.js
console.log('hello')
node_modules/.bin/webpack
处理 html
const HtmlWebpackPlugin = require('html-webpack-plugin')
// ...
plugins: [new HtmlWebpackPlugin()]
yarn add html-webpack-plugin@2.30.1 --devnode_modules/.bin/webpack
打包指定的 html
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
})
]
src/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="Mark">
<title>HAPPYMMALL ADMIN</title>
</head>
<body>
<div id="app">test</div>
</body>
</html>
node_modules/.bin/webpack
处理 js
-
yarn add babel-loader@7.1.2 babel-core@6.26.0 babel-preset-env@1.6.1 --dev
webpack.config.js
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules)/,
use: {
loader: 'babel-loader',
options: {
presets: ['env']
}
}
}
]
}
src/app.js
let a = 123
let test = (value) => {
return value * 2
}
test(a)
node_modules/.bin/webpack
处理 react
-
yarn add babel-preset-react@6.24.1 --dev
webpack.config.js
presets: ['env', 'react']
安装 react
-
yarn add react@16.2.0 react-dom@16.2.0
src/app.js
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('app')
);
node_modules/.bin/webpack- 浏览器打开 dist/index.html
处理 css
-
yarn add style-loader@0.19.1 css-loader@0.28.8 --dev
webpack.config.js
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
}
src/index.css
#app {
color: red;
}
src/app.js
import './index.css'
node_modules/.bin/webpack
css 独立打包
-
npm install --save-dev mini-css-extract-plugin
webpack.config.js
const path = require('path')
var HtmlWebpackPlugin = require('html-webpack-plugin');
var { CleanWebpackPlugin } = require('clean-webpack-plugin')
+var MiniCssExtractPlugin = require("mini-css-extract-plugin")
var webpack = require('webpack')
module.exports = {
mode: 'development',
devtool: 'cheap-module-eval-source-map',
entry: {
main: './src/index.js',
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].js'
},
module: {
rules: [{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader'
},{
test: /\.(png|jpg|gif)$/,
use: {
loader: 'url-loader',
options: {
name: '[name].[ext]',
outputPath: 'images/',
limit: 2048
}
}
},{
test: /\.css$/,
use: [
'style-loader',
+ {
+ loader: MiniCssExtractPlugin.loader
+ },
"css-loader",
'postcss-loader'
]
},{
test: /\.scss$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
importLoaders: 2
}
},
'sass-loader',
'postcss-loader'
]
},{
test: /\.(eot|ttf|svg|woff)$/,
use: {
loader: 'file-loader',
}
}]
},
plugins: [
new HtmlWebpackPlugin({
template: 'src/index.html'
}),
new CleanWebpackPlugin(),
new webpack.HotModuleReplacementPlugin(),
+ new MiniCssExtractPlugin({
+ filename: "index.css"
+ })
],
devServer: {
contentBase: './dist',
open: true,
port: 8080,
hot: true,
hotOnly: true
}
}
node_modules/.bin/webpack
处理 sass
yarn add sass-loader --dev
webpack.config.js
{
test: /\.scss$/,
use: [
'style-loader',
+ {
+ loader: MiniCssExtractPlugin.loader
+ },
{
loader: 'css-loader',
options: {
importLoaders: 2
}
},
'sass-loader',
'postcss-loader'
]
}
src/index.scss
body {
background: #ccc;
#app {
font-size: 100px;
}
}
src/app.js
import './index.scss'
yarn add node-sass --devnode_modules/.bin/webpack
处理 font-awesome
- 'npm install font-awesome'
- app.js
import 'font-awesome/css/font-awesome.min.css'
<i className='fa fa-address-booke'></I>
提出公共模块
代码提交
代码提交
git stgit diffgit dtgit co -b admin-v2git bgit add .git ca "初始化"git pushgit push --set-upstream origin admin-v2
网友评论