Webpack
使用的版本是
4.6.0
Webpack 支持零配置，如果 entry 不配置鳖谈，默認(rèn)值為 ./src 岁疼；如果 output 不寫，默認(rèn)值為 ./dist缆娃。Webpack 在 4.X 版本廢棄了 CommonsChunkPlugin捷绒，需要使用 optimize.splitChunks 來替換。extract-text-webpack-plugin@4.0.0-beta.0 有很多問題贯要，基于官方推薦暖侨，我們使用 mini-css-extract-plugin 來替換。
webpack.config.js 是不能使用 import 命令的崇渗，需要把文件名改成 webpack.config.babel.js 才可以字逗。這是一個 webpack 支持的特性，只要你把文件名改成 webpack.config.[loader].js宅广， webpack 就會用相應(yīng)的 loader 去轉(zhuǎn)換一遍配置文件葫掉。
新增了 mode 配置，有兩個參數(shù)跟狱，一個為 production俭厚，另一個為 development。
API：https://webpack.js.org/guides/getting-started/
Babel
Babel 主要是用來把代碼轉(zhuǎn)譯為 ES5驶臊。使用前需要在 webpack.config.babel.js 配置 babel-loader挪挤，其次，在新增 .babelrc 文件关翎，在該文件中進(jìn)行配置一些轉(zhuǎn)譯規(guī)則扛门。
在線轉(zhuǎn)譯的網(wǎng)址：http://babeljs.io/repl/
Mobx
Mobx 是一個簡單、可擴展的狀態(tài)管理庫笤休。
Less
Less 在 CSS 的語法基礎(chǔ)之上，引入了變量症副，Mixin（混入）店雅，運算以及函數(shù)等功能政基，大大簡化了 CSS 的編寫，并且降低了 CSS 的維護(hù)成本闹啦，就像它的名稱所說的那樣沮明，Less 可以讓我們用更少的代碼做更多的事情。
API： http://lesscss.org/
詳細(xì)配置
新建 webpack.config.babel.js 文件窍奋，并作如下配置荐健。
import path from 'path';
// 清除文件夾內(nèi)文件插件
import CleanWebpackPlugin from 'clean-webpack-plugin';
// 生成 HTML 文件插件
import HtmlWebpackPlugin from 'html-webpack-plugin';
import MiniCssExtractPlugin from 'mini-css-extract-plugin';
// 打開瀏覽器插件
import OpenBrowserPlugin from 'open-browser-webpack-plugin';
import alias from './webpack.alias.js';
const port = 9676;
module.exports = {
// 入口文件
entry: './src/index.js',
// 輸出
output: {
// 輸出文件名
filename: 'bundle.js',
// 輸出路徑
path: path.resolve(__dirname, 'dist')
},
// loader
module: {
rules: [{
test: /\.js[x]?$/,
loader: 'babel-loader',
// node_modules 不使用 babel-loader
exclude: /node_modules/
}, {
test: /\.less$/,
use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader']
}, {
test: /\.css/,
use: [MiniCssExtractPlugin.loader, 'css-loader']
}]
},
resolve: {
alias: alias,
extensions: ['.js', '.jsx']
},
plugins: [
new HtmlWebpackPlugin({
title: 'Blog',
template: path.join(__dirname, 'template.ejs')
}),
new MiniCssExtractPlugin({
filename: '[name].css',
allChunks: true
}),
new CleanWebpackPlugin('./dist/*.*'),
new OpenBrowserPlugin({url: `http://localhost:${port}`})
],
devServer: {
// 端口號
port: port,
host: '0.0.0.0',
compress: true,
// 請求帶 api 的自動轉(zhuǎn)發(fā)到 8987 端口
proxy: {
'/api/*': {
target: 'http://localhost:8987'
}
}
}
};
