webpack4.0配置模板与讲解

着急的可以直接先抄过去👇 抄过去之后直接yarn install一键全部安装

package.js

{
...
  "devDependencies": {
    "babel-core": "6.26.0",
    "babel-loader": "7.1.2",
    "babel-preset-env": "1.6.1",
    "babel-preset-react": "6.24.1",
    "css-loader": "3.6.0",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "file-loader": "^6.0.0",
    "html-webpack-plugin": "^4.3.0",
    "node-sass": "^4.14.1",
    "sass-loader": "6.0.6",
    "style-loader": "^1.2.1",
    "url-loader": "^4.1.0",
    "webpack": "4.43.0",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.0"
  },
  "dependencies": {
    "font-awesome": "^4.7.0",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-router-dom": "^5.2.0"
  }
}

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
    entry: './src/app.jsx',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'js/app.jsx'
    },
    mode: "development",
    plugins: [
        // 处理html文件
        new HtmlWebpackPlugin({
                template: './src/index.html'
            }
        ),
        // 独立css文件
        new ExtractTextPlugin("css/[name].css"),
    ],
    // 提出公共模块
    optimization: {
        splitChunks: {
            cacheGroups: {
                commons: {
                    name: "commons",
                    chunks: "initial",
                    minChunks: 2
                }
            }
        }
    },
    module: {
        rules: [
            // react file transform
            {
                test: /\.jsx$/,
                exclude: /(node_modules)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['env', 'react']
                    }
                }
            },
            // Css file transform
            {
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    fallback: "style-loader",
                    use: "css-loader"
                })
            },
            // Sass file transform
            {
                test: /\.s[ac]ss$/i,
                use:ExtractTextPlugin.extract({
                    fallback:'style-loader',
                    use:['css-loader','sass-loader']
                })
            },
            // image file
            {
                test: /\.(png|jpg|gif)$/i,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 8192,
                            name: 'resource/[name].[ext]'
                        }
                    }
                ]
            },
            // font\icon file
            {
                test: /\.(eot|svg|ttf|woff|woff2|otf)$/i,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 8192,
                            name: 'resource/[name].[ext]'
                        }
                    }
                ]
            }
        ]
    },
    // webpack-dev-server配置
    devServer: {
        // 表示浏览器访问的根目录从哪里开始 如果有配置，需要注意源文件的访问路径层级关系
        contentBase:'./dist'
        // 指定服务端口号 为了避免端口冲突
        port:8086
    }
}

好的 你可以开发了

不着急的来看这里，慢慢说这些都有什么用👇

---

webpack

打包工具，上面写的配置都建立在这个上面，很重要

webpack-dev-server

可以开启一个服务，作用就是你的代码有变动，网页自动刷新，谁用谁知道

html-webpack-plugin

可以打包html文件，把html打包成一个一个文件，还可以设置通用部分，减少代码量

babel系列

可以把es6语法变成浏览器支持的语法

style-loader和css-loader

打包样式文件，但是样式文件被打包之后不会变成对应的文件，而是插入在其他js文件中

extract-text-webpack-plugin

可以把样式文件打包成一个单独的文件，解决了上面的问题

node-sass和sass-loader

可以处理scss文件，把scss文件处理成css文件

file-loader和url-loader

可以处理文件，图片、字体等等

font-awesome

字体图标库