使用webpack從零開始搭建react項目

webpack中文文檔

webpack的安裝

yarn add webpack@3.10.1 --dev

需要處理的文件類型

webpack常用模塊

webpack-dev-server

yarn add webpack-dev-server@2.9.7 --dev

webpack用法

創建webpack.config.js文件

const path = require('path');

module.exports = {
    entry: './src/app.js', //入口文件
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'app.js'
    }
};

執行命令

node_module/.bin/webpack

打包html的配置

htmlWebpackPlugin

// 安裝html-webpakc-plugin
yarn add html-webpack-plugin --dev

自定義html模版(title,mate等信息)

配置鏈接

// webpack.config.js文件
plugins: [
    new HtmlWebpackPlugin({
        template: './src/index.html'
    })
]

安裝babel

參考鏈接

// 安裝
// 多個插件之間空格分隔
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: 將包或包中的文本提取到單獨的文件中。

配置

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中調用import "loadsh", resolve選項能夠對webpack查找"lodash"的方式去做修改。

resolve.alias

object

創建import或require的別名，來確保模塊引入變得更簡單，例如一些位於src/文件夾下的常用模塊

// webpack.config.js 配置
module.exports = {
    // ...
    resolve: {
        alias: {
            Utilities: path.resolve(__dirname, 'src/utilities/'),
            Templates: path.resolve(__dirname, 'src/templates/')
        }
    }
}

現在，替換【在導入時使用相對路徑】這種方式，就像這樣：

import Utility from '../../utilities/utility';

可以這樣使用別名

import Utility from 'Utilities/utility';

devServer.historyApiFallback

當使用 HTML5 History API 時，任意的 404 響應都可能需要被替代為 index.html。通過傳入以下啟用：

module.exports = {
    // ...
    devServer = {
        historyApiFallback: {
            index: '/dist/index.html'
        }
    }
}

接口Api代理devServer.proxy

參考地址

如果你有單獨的后端開發服務器 API，並且希望在同域名下發送 API 請求 ，那么代理某些 URL 會很有用(可以避免瀏覽器跨域報錯)。

在 localhost:3000 上有后端服務的話，你可以這樣啟用代理：

// webpack.config.js配置
module.exports = {
    // ...
    devServer: {
        proxy: {
            '/api': 'http://localhost:3000'
        }
    }
}

請求到 /api/users 現在會被代理到請求 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
                }
        }
    }
}