乐趣区

关于前端:从零配置webpack-react

jiezi

尽管说当初创立一个 react 我的项目，打包的配置都是曾经配置好了的，只须要咱们运行相应的打包命令就行了，然而咱们还是很有必要晓得该怎么来配置打包须要的配置。

上面就让咱们来走一遍 webpack 打包 react 我的项目的整个过程吧。

创立一个 React 我的项目

这里就不应用 create-react-app 指令创立 React 我的项目了，因为用 create-react-app 创立的我的项目，外面的配置曾经配置好了。

本文就间接应用 yarn init 初始化

并创立上面的目录构造：

装置 webpack

应用

yarn add webpack webpack-cli --dev

--dev 是部分装置的意思，为什么是部分装置呢？

因为并不是所有我的项目都须要应用 webpack，所以只须要在须要应用的我的项目外面装置就行了；

但最次要的起因还是，如果全局装置 webpack 的话，一个其余使用者在应用这个我的项目的时候，他的电脑没有全局装置 webpack，那么将运行不起来，但如果是部分装置的话，其余使用者只须要在开始 install 一次就行了。

应用 npx webpack -h查看是否装置胜利

因为是部分装置，因而 webpack 是在依赖包里的，对于它们命令的执行，要进入依赖包才行，否则是被认为命令有效的。或者，应用 npx 会主动找到对应的包执行命令，它是一个 npm 包执行器，个别装置了 npm 会主动装置 npx，总之，有了这个工具，执行部分的 webpack 命令就没那么简短了。

在根目录下增加 webpack.config.js 配置文件

const path = require('path');

module.exports = {
    entry: './src/index.js',
    output: {path: path.resolve(__dirname, 'dist')
    }
}

应用 npx webpack对我的项目进行打包解决

能够在我的项目目录上面发现打包好的 dist文件夹

在 index.html文件中引入打包好的 dist 中的 main.js文件，并运行 index.html文件，能够在浏览器的控制台中看到打印了 hello world。

咱们能够应用插件来生成 html 文件，这样就防止了 html 每次去手动引入js；应用插件来删除上次打包的后果。

// 装置依赖
yarn add --dev html-webpack-plugin clean-webpack-plugin

在 webpack.config.js中应用插件

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');

module.exports = {
    entry: './src/index.js',
    output: {path: path.resolve(__dirname, 'dist')
    },
    plugins:[new HtmlWebpackPlugin({template:'./public/index.html'}),
        new CleanWebpackPlugin()]
}


运行 dist 中的 index.html 文件

这里打印了两次，是因为原来在 public/index.html中引入了一次 main.js，打包的时候又引入了一次，所以一共引入了两次，所以打印了两次 hello world。

更多对于 webpack 的配置阐明能够 webpack 官网

React 应用 webpack

根本配置

下载 react，react-dom，react-scripts

yarn add react react-dom react-scripts

批改 index.js文件，增加 App.js文件

在 package.json文件中退出：

"scripts": {"start": "react-scripts start"}

运行 yarn start …. 报错

发现是装置的 react 的包外面的 webpack和本人装置的 webpack包的版本抵触了

升高装置的 webpack包的版本：

删除 node_modules 和 yarn.lcok，批改 package.json外面 webpack的版本为 4.44.2

从新下载好后，cnpm start没问题！

然而应用 npx webpack，又报错！

查看一圈发现是 html-webpack-plugin插件版本问题。

yarn remove html-webpack-plugin

yarn add --dev html-webpack-plugin@^3.2.0

下载好之后运行 npx webpack

这是因为不反对 JSX 语法包的错，所以须要去配置 loader了

去 babel 的官网，看看如何配置 jsx 语法 loader

下载

yarn add --dev @babel/preset-react babel-loader @babel/core

在 webpack.config.js退出 loader配置

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');

module.exports = {
    entry: './src/index.js',
    output: {path: path.resolve(__dirname, 'dist')
    },
    plugins:[new HtmlWebpackPlugin({template:'./public/index.html'}),
        new CleanWebpackPlugin()],
    module: {
        rules: [
            {test: /\.(js|jsx|ts|tsx)$/,
                exclude: /(node_modules)/,
                use: [
                    {
                        loader: 'babel-loader',
                        options: {presets: ['@babel/preset-react']
                        }
                    }
                ]
            }
        ]
    }
}

CSS 配置

持续配置 css须要的配置

创立 App.css文件，并引入

// App.js
import React, {PureComponent} from 'react';
import './App.css';

class App extends PureComponent{constructor(props){super(props);
        this.state = {};}

    render(){
        return (<div className='hello'>Hello World!</div>)
    }
}
export default App;
// App.css
.hello {color: red;}

下载 style-loader，css-loader，这里要特地留神 loader的版本问题，能够应用 npm ls style-loader 查看 react装置好了的 loader 是什么版本的（因为下载了 react-scripts，这个包外面也有打包性能，所以外面必定配置了 style-loader,css-loader这些 loader 的），咱们就装置多少版本的。

应用

yarn add --dev style-loader@1.3.0 css-loader@4.3.0

在 webpack.config.js 中退出配置

{
    test: /\.css$/i,
    use: ['style-loader', 'css-loader']
}

配置好后，npx webpack打包，运行 dist/index.html，发现 Hello World字体色彩为红色。

在控制台调试发现，css 款式的引入是在 head 插入的，当我的项目变大时款式直接插入 head 中的形式并不好，咱们须要将款式拆散

应用 mini-css-extract-plugin插件，它会将 CSS 提取到独自的文件中，为每个蕴含 CSS 的 JS 文件创建一个 CSS 文件，并且反对 CSS 和 SourceMaps 的按需加载。

下载 mini-css-extract-plugin

yarn add --dev mini-css-extract-plugin@0.11.3

webpack.config.js配置 mini-css-extract-plugin

plugins: [
    ...
    new MiniCssExtractPlugin({
        // Options similar to the same options in webpackOptions.output
        // both options are optional
        filename: "[name].css",
        chunkFilename: "[id].css"
    })
]

module: {
    rules: [
        {
            test: /\.css$/,
            use: [
                {
                    loader: MiniCssExtractPlugin.loader,
                    options: {
                    // you can specify a publicPath here
                    // by default it use publicPath in webpackOptions.output
                    publicPath: '../'
                    }
                },
                "css-loader"
            ]
        }
    ]
}


配置 img、font、map3 等资源的 loader

应用 url-loader，它的性能相似于 file-loader, 然而在文件大小（单位为字节）低于指定的限度时，能够返回一个 DataURL。

yarn add --dev url-loader@4.1.1
// App.css
.hello {
    color: red;
    background: url('./assets/backgroud2.jpg') no-repeat center;
    background-size: cover;
    height: 100vh;
}

webpack.config.js增加配置

{test: /\.(jpg|png|gif)$/,
    loader: 'url-loader',
    options: {
        limit: 1000,
        name: 'static/img/[name].[hash:7].[ext]'
    }
}

运行 dist/index.html报如下谬误：

这是因为本地没有启动 web 服务，所以浏览器拜访不了本地的资源，这是失常的。

其余资源的配置和下面的差不多，这里就不做介绍了。

参考资料：

应用 webpack4 从零配置 react 我的项目

退出移动版