[webpack中文文檔](https://webpack.docschina.org/)
#### webpack的安裝
```
yarn add webpack@3.10.1 --dev
```
#### 需要處理的文件類型
#### webpack常用模塊
#### webpack-dev-server
```
yarn add webpack-dev-server@2.9.7 --dev
```
#### webpack用法
> 創(chuàng)建webpack.config.js文件
```js
const path = require('path');
module.exports = {
? ? entry: './src/app.js', //入口文件
? ? output: {
? ? ? ? path: path.resolve(__dirname, 'dist'),
? ? ? ? filename: 'app.js'
? ? }
};
```
> 執(zhí)行命令
```
node_module/.bin/webpack
```
##### 打包html的配置
> htmlWebpackPlugin
```
// 安裝html-webpakc-plugin
yarn add html-webpack-plugin --dev
```
> 自定義html模版(title,mate等信息)
[配置鏈接](https://github.com/jantimon/html-webpack-plugin#options)
```
// webpack.config.js文件
plugins: [
? ? new HtmlWebpackPlugin({
? ? ? ? template: './src/index.html'
? ? })
]
```
##### 安裝babel
[參考鏈接](https://webpack.docschina.org/loaders/babel-loader/#src/components/Sidebar/Sidebar.jsx)
```
// 安裝
// 多個插件之間空格分隔
yarn add babel-core@6.26.0 babel-present-env@1.6.1 babel-loader@7.1.2 --dev
// webpack.config.js配置
module: {
? rules: [
? ? {
? ? ? test: /\.js$/,
? ? ? exclude: /(node_modules|bower_components)/,
? ? ? use: {
? ? ? ? loader: 'babel-loader',
? ? ? ? options: {
? ? ? ? ? presets: ['@babel/preset-env'],
? ? ? ? ? plugins: [require('@babel/plugin-transform-object-rest-spread')]
? ? ? ? }
? ? ? }
? ? }
? ]
}
```
##### 安裝處理React的插件
> `babel-preset-react`
```
//babel-preset-react
yarn add babel-preset-react@6.24.1 --dev
```
##### 如額使用React
```
// 安裝react react-dom
yarn add react react-dom
```
##### 加載CSS
> `style-loader`與`css-loader`
```
module:{
? ? rules: [
? ? ? ? {
? ? ? ? ? ? test: /\.css$/,
? ? ? ? ? ? use: [
? ? ? ? ? ? ? ? 'style-loader',
? ? ? ? ? ? ? ? 'css-loader'
? ? ? ? ? ? ]
? ? ? ? }
? ? ]
}
```
##### 將文件提取出來
> `ExtractTextWebpackPlugin`
[ExtractTextWebpackPlugin: 將包或包中的文本提取到單獨(dú)的文件中货岭。](https://webpack.docschina.org/plugins/extract-text-webpack-plugin/#src/components/Sidebar/Sidebar.jsx)
> 配置
```
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module:{
? ? rules: [
? ? ? ? {
? ? ? ? ? ? test: /\.css$/,
? ? ? ? ? ? use: ExtractTextPlugin.extract({
? ? ? ? ? ? ? ? ? fallback: "style-loader",
? ? ? ? ? ? ? ? ? use: "css-loader"
? ? ? ? ? ? })
? ? ? ? }
? ? ]
},
plugins: [
? ? new ExtractTextPlugin("styles.css"),
]
```
##### 處理sass
> `sass-loader`, `sass-loader`依賴`node-sass`與`webpack`
```
yarn add sass-loader node-sass
```
##### 圖片資源處理
> 用`file-loader`與`url-loader`處理圖片資源且改，`url-loader`依賴`file-loader`
```
// 安裝
yarn add url-loader file-loader --dev
// 配置
module: {
? ? rules: [
? ? ? ? {
? ? ? ? ? ? test: /\.(png|jpg|gif)$/,
? ? ? ? ? ? use: [
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? loader: 'url-loader',
? ? ? ? ? ? ? ? ? ? options: {
? ? ? ? ? ? ? ? ? ? ? ? limit: 8192
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ]
? ? ? ? }
? ? ]
}
```
##### font-awesome
```
yarn add font-awesome
// jsx中引入css
import 'font-awesome/css/font-awesome.min.css';
```
##### CommonsChunkPlugin
```
new webpack.optimize.CommonsChunkPlugin({
? ? name: 'common',
? ? filename: 'js/base.js'
})
```
#### webpack-dev-server
```
// 安裝
yarn webpack-dev-server@2.9.7
// webpack.config.js中 配置
devServer: {
? ? contentBase: './dist'
? ? port: 8086
}
// 更改啟動方式 package.json
"scripts": {
? ? "dev" : "node_modulse/.bin/webpack-dev-server",
? ? "dist": "node_modules/.bin/webpack -p" //添加-p為線上打包
}
```
##### resolve
> object
配置模塊如何解析因苹，例如性置，擋在ES2015中調(diào)用`import "loadsh"`, `resolve`選項能夠?qū)ebpack查找`"lodash"`的方式去做修改。
###### resolve.alias
> object
創(chuàng)建`import`或`require`的別名秒梅，來確保模塊引入變得更簡單铐伴，例如一些位于`src/`文件夾下的常用模塊
```
// webpack.config.js 配置
module.exports = {
? ? // ...
? ? resolve: {
? ? ? ? alias: {
? ? ? ? ? ? Utilities: path.resolve(__dirname, 'src/utilities/'),
? ? ? ? ? ? Templates: path.resolve(__dirname, 'src/templates/')
? ? ? ? }
? ? }
}
```
現(xiàn)在，替換【在導(dǎo)入時使用相對路徑】這種方式隅要，就像這樣：
```
import Utility from '../../utilities/utility';
```
可以這樣使用別名
```
import Utility from 'Utilities/utility';
```
###### devServer.historyApiFallback
當(dāng)使用 `HTML5 History API` 時，任意的 404 響應(yīng)都可能需要被替代為 `index.html`董济。通過傳入以下啟用：
```
module.exports = {
? ? // ...
? ? devServer = {
? ? ? ? historyApiFallback: {
? ? ? ? ? ? index: '/dist/index.html'
? ? ? ? }
? ? }
}
```
###### 接口Api代理`devServer.proxy`
[參考地址](https://webpack.docschina.org/configuration/dev-server/#devserver-proxy)
如果你有單獨(dú)的后端開發(fā)服務(wù)器 API步清，并且希望在同域名下發(fā)送 API 請求 ，那么代理某些 URL 會很有用(可以避免瀏覽器跨域報錯)虏肾。
在 localhost:3000 上有后端服務(wù)的話尼啡，你可以這樣啟用代理：
```
// webpack.config.js配置
module.exports = {
? ? // ...
? ? devServer: {
? ? ? ? proxy: {
? ? ? ? ? ? '/api': 'http://localhost:3000'
? ? ? ? }
? ? }
}
```
請求到 `/api/users` 現(xiàn)在會被代理到請求 `http://localhost:3000/api/users`。
```
module.exports = {
? ? // ...
? ? devServer: {
? ? ? ? proxy: {
? ? ? ? ? ? '/manage': {
? ? ? ? ? ? ? ? ? ? target: 'http://admintest.happymmall.com',
? ? ? ? ? ? ? ? ? ? changeOrigin: true
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? '/user/logout.do': {
? ? ? ? ? ? ? ? ? ? target: 'http://admintest.happymmall.com',
? ? ? ? ? ? ? ? ? ? changeOrigin: true
? ? ? ? ? ? ? ? }
? ? ? ? }
? ? }
}
```
