webpack配置说明

项目目录结构

目录结构.png

• node_modules是依赖模块放的地方，不必管（有些模块的代码里会有说明文档，可以在node_modules里查看）
• src放源码
• .babelrc是Babel插件的配置文件
• .gitignore是git的忽略配置，一般肯定会选择忽略node_modules文件夹
• index.js是入口文件，webpack 从这里开始打包依赖
• package.json里边有所有的依赖模块的信息，还有npm的命令（script对象下的内容）
• package-lock.json，锁定初次安装时的依赖版本
• postcss.config.js是postcss的配置文件
• template.html是模板html，用HtmlWebpackPlugin这个插件时必须的提供的文件
• webpack.*.config.js是webpack的配置文件，分为开发环境与生产环境两个版本，其中共同的部分可以提取出来

webpack.config

/*
*
* config的组成部分
* 入口 从那个文件开始构建
* 输出 在哪里输出打包好的bundles
* loader 如何处理非JS文件
* 插件 用以解决loader无法解决的问题
*
*/

/*
*  Webpack的工作方式是：把你的项目当做一个整体，通过一个给定的主文件（如：index.js），
*  Webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，
*  最后打包为一个（或多个）浏览器可识别的JavaScript文件。
*/

//使用插件，需要先在这里引用，例如
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const webpack = require('webpack');
module.exports = {
    //entry可以简写成字符串的形式，也可以导入数组字符串，这种写法缺少扩展性
    //entry: './index.js',
    //常用对象的写法 entry: {[entryChunkName: string]: string|Array}
    entry:{
        index: './index.js'
    },
    //即便存在多个入口起点，但只能有一个出口配置，一个配置可以产生多个出口文件
    //如果只输出一个文件，也可以写死文件名，下面这种写法，会动态生成多个出口文件
    output: {
        filename: '[name].js',
        path: __dirname + '/dist'
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                //这里的use也可以写成
                // use: [
                //     'style-loader',
                //     'css-loader'
                // ]
                use: [
                    {loader: 'style-loader'},
                    {
                        loader: 'css-loader',
                        options: {
                            modules: true
                        }
                    },
                    //css自动补全插件
                    {loader: "postcss-loader"}
                ]
            },
            {
                test: /\.(png|svg|jpg|gif)$/,
                use: [
                    'file-loader'
                ]
            },
            //字体文件 在css中用@font-face来引用的时候会被处理
            {
                test: /\.(woff|woff2|eot|ttf|otf)$/,
                use: [
                    'file-loader'
                ]
            },
            //加载数据文件的配置，json是默认支持的
            {
                test: /\.(csv|tsv)$/,
                use: [
                    'csv-loader'
                ]
            },
            {
                test: /\.xml$/,
                use: [
                    'xml-loader'
                ]
            },
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                loader: 'babel-loader'
            }
        ]
    },
    //webpackDevServer配置
    devServer: {
        contentBase: './dist',
        hot: true,
        //代理转发请求的配置
        proxy: {
            '/': {
                target: 'http://10.11.115.19:8099',
                changeOrigin: true
            }
        }

    },
    //官方推荐的sourcemap开发时的最佳配置,eval-source-map功能最强性能最差，eval性能最好，功能最简单,这个选项不可以在生产环境使用,有安全和性能问题
    devtool:'eval-source-map',
    //不要devtool和plugin同时使用,这里指对同一个插件
    plugins: [
        //html模板插件
        new HtmlWebpackPlugin({template: './template.html'}),
        //清理dist目录插件
        new CleanWebpackPlugin(['dist']),
        //热加载的配置
        new webpack.NamedModulesPlugin(),
        new webpack.HotModuleReplacementPlugin()
    ]

}

//有关于package.json的注释
//scripts: 这里是npm脚本,参数后边的两个中横线代表传递给命令的参数
//devDependencies: 这里对应的命令是npm install --save-dev，这里的依赖只有在开发时有用
//dependencies: 这里对应的命令是npm install --save，这里的依赖将一直存在，项目上线时也会被打包

//.babelrc文件用于配置babel，这个JSON文件会使babel生效  https://babeljs.cn/docs/setup/#installation

babelrc配置

{
  "presets": ["env","react"]
}

postcss配置

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