webpack的配置文件

Posted 2023-03-07

参考技术A webpack 的默认配置文件是 webpack.config.js ,所以在我们的项目根目录下(02webpack-demo)新建一个webpack.config.js的文件，里面啥都不写，这个时候我们在终端中运行 npx webpack ,就会在根目录下生成一个 dist 文件夹，里面有一个 main.js ，这是 webpack 利用默认的配置项为我们打包生成的文件,接下来我们来简单配置一下这个文件里面的内容:

配置好文件后，再次运行 npx webpack ,这个时候在我们的项目目录下就生成了一个 bundle 文件夹，里面有一个 bundle.js 就是 webpack 帮我们翻译好的文件了，在我们的 demo.html 中引入 bundle.js ，在浏览器中打开 demo.html 文件，可以看到我们打印的内容已经正确的出现在了浏览器控制台中了。

我们已经知道了 webpack 的默认配置文件的名字是 webpack.config.js ，那么有没有办法修改这个名字呢？比如我想把这个名字改为 test.config.js 或者其他什么名字，答案是有的，比如我改成了 test.js ，那么在利用 webpack 进行打包的时候就应该运行 npx webpack --config test.js ，打包结果和上面的还是一样的.

在上面的打包过程中，每次打包的时候都要执行 npx webpack 或者 npx webpack --config test.js ,你可能会觉得有点繁琐，我们可以在 package.json 中的 scripts 中配置一个脚本，如下所示:

配置好脚本之后，在终端中执行 npm run bundle 这个命令， webpack 就会重新帮我们打包文件，这里涉及到的知识点是 npm scripts ,它的原理是当我们在终端中执行 npm run bundle 的时候，实际上在运行的就是 package.json 配置中的 bundle 这个命令，而 bundle 这个命令的底层就是在帮我们执行 webpack 这个命令，这里有一个点需要注意，如果我们在 scripts 中以命令的形式去执行 webpack 的时候，首先会在工程目录下的 node-modules 下去找是否安装了 webpack ，如果安装了的话就会直接使用 node-modules 中的 webpack ,但是如果 node-modules 下面没有 webpack ,就会去全局寻找 webpack

1.全局安装的 webpack ,打包的之后在终端中运行 webpack index.js
2.局部安装的 webpack ，打包的之后在终端中运行 npx webpack index.js
3.通过配置 npm scripts 脚本，打包的之后在终端中运行 npm run 你配置的脚本的内容 ，比如我配置的脚本为:

那么在打包的时候运行 npm run test 即可

WebPack配置文件抽离存放

WebPack配置文件的分离

文章目录

• WebPack配置文件的分离
• 简述
• 一、安装插件&配置
• 二、抽离存放
• • 1.分离配置文件
  • 2.merge配置文件之间接合
• 三、打包
• 总结

---

简述

对配置文件进行抽离,以达到开发时依赖一个配置文件,发布时依赖一个配置文件的目标,在配置文件的代码量巨大时,此举可有效提升整洁性;
所有配置混杂的webpack.config.js在分离完成后可删除

---

一、安装插件&配置

通常会分离为三个文件,一个开发时依赖的配置文件(这里我命名为dev.config.js),一个发布时依赖的配置文件(这里我命名为prod.config.js),还有一个两模式下都需要依赖的配置文件(这里我命名为base.config.js);

安装插件
没错,这个活webpack还是干不了.
webpack-merge协助对两个配置文件进行合并.

npm i webpack-merge -D

该插件在使用时需要导入:

const webpackMerge = require('webpack-merge')

二、抽离存放

抽离存放可以,但是用的时候也不能让webpack找不着;

1.分离配置文件

//这是webpack.config.js的内容
module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'built.js',
        path: resolve(__dirname, 'build')
    },
    module: {
        rules: [
            {
                test: /\\.css$/,
                use: ['style-loader', 'css-loader']
            },
            {
                exclude: /\\.(css|js|html|less)$/,
                loader: 'file-loader',
                options: {
                    name: '[hash:10].[ext]'
                },

            },
            {
                test: /\\.html$/,
                loader: 'html-loader'
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        })
    ],
    mode: 'development',
    devServer: {
        contentBase: resolve(__dirname, 'build'),
        compress: true,
        prop: 3000
    }
};

仅生产环境下需要的配置放到prod.config.js

//这是prod.config.js的内容
module.exports = {
    devServer: {
        contentBase: resolve(__dirname, 'build'),
        compress: true,
        prop: 3000
    }
}

---

仅开发环境下需要的配置放到dev.config,js

//这是dev.config,js的内容
module.exports = {
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        })
    ]
}

---

开发环境&生产环境下均需要的配置放到base.config,js

//这是base.config,js的内容
module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'built.js',
        path: resolve(__dirname, 'build')
    },
    module: {
        rules: [
            {
                test: /\\.css$/,
                use: ['style-loader', 'css-loader']
            },
            {
                exclude: /\\.(css|js|html|less)$/,
                loader: 'file-loader',
                options: {
                    name: '[hash:10].[ext]'
                },

            },
            {
                test: /\\.html$/,
                loader: 'html-loader'
            }
        ]
    },
    mode: 'development',
};

到此,我们已经把webpack.config.js分开为三个文件,你可以删除原本的webpack.config.js了.

---

2.merge配置文件之间接合

配置文件在用的时候还是要发挥合在一起时的效果的;这需要用到merge了,它的本意就是"结合".
现在更新一下三个文件的内容:
1.prodConfig中进行baseConfig和prodConfig的合并

/*因为在pordConfig内,所以只需要引入baseConfig写在webpackMerge()方法内,再把prodConfig内需要合并的代码也写在webpackMerge()方法内即可.*/
const webpackMerge = require('webpack-merge')
const BaseConfig = require('./base.config.js')
module.exports = webpackMerge(BaseConfig, {
        plugins: [
        new UglifyjsWebpackPlugin()
    ]
})

---

baseConfig合并于prodConfig内,所以接下来仅需要进行dev.config.js和prodConfig的合并

---

2.devConfig中进行dev.config.js和prodConfig的合并

/*因为在devConfig内,所以只需要引入ProdConfig写在webpackMerge()方法内,再把devConfig内需要合并的代码也写在webpackMerge()方法内即可.*/
const webpackMerge = require('webpack-merge')
const ProdConfig = require('./prod.config.js')
module.exports = webpackMerge(ProdConfig, {
    devServer: {
        contentBase: './dist',
        inline:true
    }
})

完事了吗?但这样直接打包会报错.

三、打包

最后需要在package.json中代指 打包指令 的别名中进行配置,比如在build和dev中:

"build":"webpack --config ./build/prod.config.js"
"dev":"webpack-dev-server --open --config ./build/dev.config.js"

合并完毕后打包,三文件会放到base.config.js所在的文件夹中,因为base中的output的path设置的路径是自身所在文件夹的绝对路径,当然,是可以改的.
修改这个绝对路径,以把三个文件输出至合适的位置即可.

总结

补下webpack的内容,只捡了一些内容比较多的部分写,准备开更vue-cli了.
感谢你读到这里.