关于webpack:小白上学之webpack5-第三章-webpack5的配置

2次阅读

共计 2772 个字符，预计需要花费 7 分钟才能阅读完成。

webpack默认入口entry: src/index.js，进口为:dist/main.js

默认配置文件为:webpack.config.js
如果须要指定其余配置文件，能够应用 –config

例如：
在 webpack5 文件夹根目录创立一个名为:webpack.dev.js，将 webpack.config.js 中的内容剪贴到它中。
此时 webpack.config.js 中曾经没有内容，这时候执行 npm run build 会间接报错。
咱们批改 package.json 中scripts属性的值为:

"scripts": {"build": "webpack --config ./webpack.dev.js"}

再执行 npm run build 发现能够构建胜利，则咱们就将默认的配置文件改为了 webpack.dev.js 这在日后咱们须要不同环境构建不同内容时候，通过命令能够轻松构管制配置文件的应用起到关键性作用。

好了，下面内容过于简略，就不应用 webpack-cli 来创立了，有趣味的小伙伴能够自行搜寻

webpack.config.js 中内容如下：

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

这 context 是干啥的啊？
执行以下npm run build，发现报错了。看报错信息为：

Module not found: Error: Can`t  resolve './src/index.js' in 'User/xxx/webpack5/src'

这下咱们翻译一波不就了解了么！原来 context 指定到 src 为上下文了，则咱们外部应用的指标都指定到 src 目录了。那 entry 就不能再写成 ./src/index.js 了。（你真废话，能讲明确不？）
其实就是一句话：应用了 context 后，则入口进口门路都是以 context 配置的门路为基准了。因而，entry就得写成 /index.js 或./index.js, 因为当初 / 就指得是 src 目录。

把 context 先删除或者正文了吧，上面的内容用不到。。。

说到 `entry` 了，那我为何就不能有多个入口文件呢？

entry能够配置多个入口文件，当只有一个的时候值为 string 类型，多个的时候就为Array

module.exports = {entry: ['./src/index.js', './src/test.js'] // 多个为 Array，有先后顺序之分
}

咱们能够在 test.js 中输出一串代码 console.log('少装 B，不会造雷劈！')，再执行npm run build，双击关上dist/index.html，F12 关上控制台，能够发现：index.js和 test.js 中的内容都输入了。（诶? 我就想让 test.js 放数组第一位，你会发现，test.js中的内容先打印了）entry也是有先后顺序之分的，数组后面的先执行，前面的以此类推。

entry也能够是 object 类型，用的比拟少，略微记一下得了。若你是大牛，须要写本人的 js 插件引擎啥的，那你就学吧。
上面内容就是说：我不想让 index.js 和test.js打包在一起, 让他们别离打包

entry: {moment: { import: 'moment-mini', runtime: 'runtime'}, // 将专用局部提出来, 生成 dist/moment.js 并主动退出到 html 内，通过 script 标签退出
    reactvendors: {import: ['react', 'react-dom'], runtime: 'runtime' }, // 将专用局部提出来, 生成 dist/reactvendors.js 并主动退出到 html 内，通过 script 标签退出
    abc: ['vue', 'react'],
    app: {
        import: './src/index.js', // 入口文件
        dependOn: ['abc'], // 原本 app 构建时候会打包所有依赖，但这里配置了 abc，则就不会将 'vue','react' 打包在内
        filename: 'app.js' // 打包后的文件名称
    },
    test: {
        import: './src/test.js', // 入口文件
        dependOn: ['reactvendors', 'moment'], // 原本 test 构建时候会打包所有依赖，但这里配置了 reactvendors，moment，则就不会将其所须要的包打包在内，而是通过共享模式退出到 html 中
        filename: 'pages/[name].js' // 打包后的文件名称，也能够写成 'pages/test.js'，则生产地址为 'dist/pages/test.js', [name]: test
    },
    
}

entry: {
    app: './src/index.js', // 入口文件,
    test: ['./src/test.js', './src/nulls.js'], // 多个入口文件
}

咱们测试 entry 为以下的配置：

entry: {
    app: {import './src/index.js'},
    test: './src/test.js'
}

因为每次构建都须要删除 dist 文件夹能力保障不缓存任何货色，则咱们在 package.json 中输出：

  "scripts": {
    "build": "rm -rf ./dist && webpack",
    "build:dev": "rm -rf ./dist && webpack --config ./webpack.dev.js" // 这行我写着只是为了不便读者了解
  },
// 或者你手动删除一下 dist 文件夹，不改 package.json 也行，可能你运行在 cmd 中不反对 rm 命令，能够应用 git 的 bash 命令行窗口
// windows 平台下的 vscode 自带的命令行可能不反对 rm 命令，所以手动删除一下 dist，就别改 package.json 文件了

再执行npm run build

如果报错说'rm' 不是外部或外部命令，也不是可运行的程序，那你就别改package.json，手动删除 dist 文件以下即可

能够发现 dist 文件夹内有两个 js 文件：app.js和 test.js，再关上index.html 文件，发现它们两个 js 文件也都被主动以 <script> 标签模式引入了。
咱们再扭转一点:

entry: {
    app: {
        import './src/index.js',
        filename: 'nba.js'
    },
    cba: {
        import './src/index.js',
        filename: '[name].js'
    },
}

再执行 npm run build, 能够发现dist 文件夹内有：nba.js和cba.js

正文完