點擊下載
本文文檔

當前位置：首頁 - 科技 - 知識百科 - 正文

webpack3+React 的配置全解

來源：懂視網責編：小采時間：2020-11-27 22:32:07

webpack3+React 的配置全解

webpack3+React 的配置全解:webpack3 的配置相對于webpack2 又有了一些新的變化，這里講其記錄下來，備查。 package.json 的完整文件在結尾。 1. 安裝 npm init yarn add webpack webpack-dev-server -D 2. 配置簡單輸入輸出 webpack.config.js

推薦度：

點擊下載本文 文檔為doc格式

導讀webpack3+React 的配置全解:webpack3 的配置相對于webpack2 又有了一些新的變化，這里講其記錄下來，備查。 package.json 的完整文件在結尾。 1. 安裝 npm init yarn add webpack webpack-dev-server -D 2. 配置簡單輸入輸出 webpack.config.js

webpack3 的配置相對于webpack2 又有了一些新的變化，這里講其記錄下來，備查。

package.json 的完整文件在結尾。

1. 安裝

npm init
yarn add webpack webpack-dev-server -D

2. 配置簡單輸入輸出

webpack.config.js

module.exports = {
 entry: {
 ventor: ['react', 'react-dom'],
 index: [
 'babel-polyfill',
 'react-hot-loader/patch',
 path.resolve(__dirname, "src/index.js")
 ]
 },
 output: {
 path: path.resolve(__dirname, "dist"),
 filename: "js/[name].js",
 },
 devtool: 'source-map'

將所用到的庫單獨分離出來，在多頁面應用中，對減少文件體積很有用。

react-hot-loader 的3.0 版本的get start 剛剛更新。單獨打包了補丁，所以react-hot-loader 作為一個生產依賴安裝。

這樣基本的輸入輸出就完成了。

3. webpack-dev-server

 devServer: {
 hot: true, // 熱重載
 inline: true, // 啟用inline 模式
 port: 46480,
 contentBase: path.resolve(__dirname, "dist"),
 proxy: {
 "/api": {
 target: "xxxxx",
 secure: false, // 處理https
 changeOrigin: true, // 跨域
 }
 }
 },

4. loaders

webpack 將所有的文件都當做js文件處理，所以配置加載器

4.1 安裝loader

yarn add babel-loader less-loader postcss-loader css-loader style-loader -D
yarn add react-hot-loader

4.2 配置loader

注意，loader 中的 name 都是相對于 output中的path 的。

postcss-loader是對css 文件做一些預處理，常用就是添加css3屬性前綴，用到 autoprefixer 插件。配置postcss-loader ，需要 postcss.config.js 文件。

babel-loader 需要配置option選項，這里單獨提出去，放置到.babelrc 文件中。

webpack.config.js

 module: {
 rules: [{
 test: /.js$/,
 use: [
 "react-hot-loader/webpack",
 "babel-loader",
 ],
 exclude: path.resolve(__dirname, "node_modules")
 },
 {
 test: /\.css$/,
 use: [
 "style-loader",
 "css-loader",
 "postcss-loader"
 ]
 },
 {
 test: /\.less$/,
 use: [
 "style-loader",
 "css-loader",
 "postcss-loader",
 "less-loader"
 ]
 },
 {
 test: /\.(gif|png|jpe?g)$/,
 use: [{
 loader: "file-loader",
 options: {
 name: "static/img/[name].[ext]"
 }
 }]
 },
 {
 test: /\.(ttf|eot|svg|woff)(\?(\w|#)*)?$/,
 use: [{
 loader: "file-loader",
 options: {
 name: "static/font/[name].[ext]"
 }
 }]
 }
 ]
 },

.babelrc

{
 "presets": ["es2015", "stage-0", "react"],
 "plugins": ["transform-decorators-legacy"]
}

transform-decorators-legacy 這個插件用來轉化es7 中的裝飾器，比如 autobind，connect 等。

postcss.config.js

module.exports = {
 plugins: [
 require('autoprefixer')
 ]
}

5. 插件

插件是webpack 中非常重要的一部分。

5.1 HtmlWebpackPlugin 插件。

自動生成html文件，并自動引入script文件。有幾個頁面就要new 幾個插件，自動引入同名的js文件。

const HtmlWebpackPlugin = require("html-webpack-plugin");
new HtmlWebpackPlugin({
 template: path.resolve(__dirname, "src/index.html"),
 name: "index",
 title: "webpack config cli",
 filename: "index.html",
 inject: true,
}),

5.2 CommonsChunkPlugin 插件將單獨的部分作為chunk 提出去，減小文件體積，這里的name 要和 entry中對應。

new webpack.optimize.CommonsChunkPlugin({
 name: 'vendor',
 filename: 'js/vendor.js'
}),

5.3 webpack 模塊熱替換插件 HotModuleReplacementPlugin

new webpack.HotModuleReplacementPlugin()

5.4 ExtractTextPlugin 分離css 文件

在這個插件加載以前，css 文件是放在js文件中，在解釋js時，將文本插入到style節點中。

使用這個插件以后，就直接可以單獨分離css 文件。

但是在開發環境中不要使用，會影響熱重載的速度。

ExtractTextPlugin 的插件配置相對復雜。首先包裹loaders，注意這里已經不能再使用style-loader了，因為提取css的任務插件完成了。當提取失敗時，使用style-loader 。

const ExtractTextPlugin = require("extract-text-webpack-plugin");
 // loader部分
 {
 test: /\.css$/,
 use: ExtractTextPlugin.extract({
 fallback: "style-loader",
 use: [
 "css-loader",
 "postcss-loader"
 ]
 })
 },
 {
 test: /\.less$/,
 use: ExtractTextPlugin.extract({
 fallback: "style-loader",
 use: [
 "css-loader",
 "postcss-loader",
 "less-loader"
 ]
 })
 }
 // 插件部分
 new ExtractTextPlugin({
 filename: "css/index.css"
 }),

6. 其他

extensions：用于省略后綴名

alias 處理別名。

 resolve: {
 extensions: [" ", ".js", ".jsx", ".css", ".less"],
 alias: {
 components: path.resolve(__dirname, 'src/components/'),
 css: path.resolve(__dirname, "src/css/"),
 model: path.resolve(__dirname, 'src/model/'),
 store: path.resolve(__dirname, 'src/store/')
 }
 }

7.package.json

{
 "name": "webpack-react-cli",
 "version": "1.0.0",
 "description": "",
 "main": "webpack.config.js",
 "scripts": {
 "test": "echo \"Error: no test specified\" && exit 1",
 "dev": "webpack-dev-server --open",
 "build": "webpack -w"
 },
 "author": "",
 "license": "ISC",
 "devDependencies": {
 "autoprefixer": "^7.1.2",
 "babel-core": "^6.25.0",
 "babel-loader": "^7.1.1",
 "babel-plugin-transform-decorators-legacy": "^1.3.4",
 "babel-preset-es2015": "^6.24.1",
 "babel-preset-react": "^6.24.1",
 "babel-preset-stage-0": "^6.24.1",
 "css-loader": "^0.28.4",
 "extract-text-webpack-plugin": "^3.0.0",
 "file-loader": "^0.11.2",
 "html-webpack-plugin": "^2.30.1",
 "less": "^2.7.2",
 "less-loader": "^4.0.5",
 "postcss-loader": "^2.0.6",
 "style-loader": "^0.18.2",
 "webpack": "^3.0.0",
 "webpack-dev-server": "^2.5.0"
 },
 "dependencies": {
 "babel-polyfill": "^6.23.0",
 "core-decorators": "^0.19.0",
 "prop-types": "^15.5.10",
 "react": "^15.6.1",
 "react-dom": "^15.6.1",
 "react-hot-loader": "^3.0.0-beta.7"
 }
}

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

webpack3+React 的配置全解

推薦度：

點擊下載本文 文檔為doc格式

標簽：的配置 webpack3 的配置全解

熱門焦點

webpack3+React 的配置全解

webpack3+React 的配置全解

webpack3+React 的配置全解

最新推薦

猜你喜歡

熱門推薦