小伙伴们，今天要聊点有趣的~ 你们是不是好奇如何把源文件塞到webpack流程里去？其实一点儿都不复杂，就跟着我咋做！
module.exports = {
entry: `./index.js`,
}
module.exports = {
entry: {
"index": `./index.js`,
},
}
// 使用 glob 等工具使用若干通配符，运行时获得 entry 的条目
module.exports = {
entry: glob.sync('./project/**/index.js').reduce((acc, path) => {
const entry = path.replace('/index.js', '')
acc[entry] = path
return acc
}, {}),
}
不清楚 webpack 怎么自动找入口文件?超级容易的，就在webpack的设置文件里敲上一句就成了!给 project 子目录中的 index.js 都设定成入口文件，这样你再建新项目只需要随便加个子目录，再安个 index.js 文件成入口就搞定了，省时省力超便捷!
npm run build --project components
// 解析命令行参数
const argv = require('minimist')(process.argv.slice(2))
// 项目
const project = argv['project'] || 'index'
现在，我们得搞明白webpack怎样输出我们的代码，包括文件名和位置之类的东西。既然说到webpack 4的output.pathinfo功能，那咱们就赶紧尝试一下。它可是个非常实用的小玩意儿，会在输出结果里添加上一些有用的提示信息。而且，咱要是用eval这种开发工具的话，这功能还能帮我们快速找到出错的原因~
module.exports = {
entry: {
"index": `./${project}/index.js`,
}
}
module.exports = {
entry: {
"index": `./components/index.js`,
}
}
讲Webpack打包时，得说说那个HASH，它每次打包都会生出个独一无二的哈希值，不管文件塞的啥。这货儿就是这次建构的标志，嘞也是浏览器缓存找不到的那种！不过别忘了，这东西在开发阶段特管用，实际运营了不太需要。
module.exports = {
output: {
// path 必须为绝对路径
// 输出文件路径
path: path.resolve(__dirname, '../../dist/build'),
// 包名称
filename: "[name].bundle.js",
// 或使用函数返回名(不常用)
// filename: (chunkData) => {
// return chunkData.chunk.name === 'main' ? '[name].js': '[name]/[name].js';
// },
// 块名，公共块名(非入口)
chunkFilename: '[name].[chunkhash].bundle.js',
// 打包生成的 index.html 文件里面引用资源的前缀
// 也为发布到线上资源的 URL 前缀
// 使用的是相对路径，默认为 ''
publicPath: '/',
}
}
问你们个事儿，能用webpack4来开发吗？当然能用只要设置好开启模块化运行的mode和要加载的文件的entry这两样东西，而且它还内建了许多优化方案。连环境变量这种小破事也全交Webpack处理得了√
还得提醒大家，虽然webpack4能帮咱们自动设置process.env.NODE_ENV，但是别的地方要是也需要这个环境变量的话，默认的那个’production’就可能给咱们带来麻烦了。所以，咱们在运用它时还是小心点好！
module.exports = {
output: {
// path 必须为绝对路径
// 输出文件路径
path: path.resolve(__dirname, '../../dist/build'),
// 包名称
filename: "[name].bundle.js",
// 块名，公共块名(非入口)
chunkFilename: '[name].[chunkhash].bundle.js',
// 打包生成的 index.html 文件里面引用资源的前缀
// 也为发布到线上资源的 URL 前缀
// 使用的是相对路径，默认为 ''
publicPath: '/',
// 一旦设置后该 bundle 将被处理为 library
library: 'webpackNumbers',
// export 的 library 的规范，有支持 var, this, commonjs,commonjs2,amd,umd
libraryTarget: 'umd',
}
}
想问问你们怎么解决项目里面各种模块的问题吗？别着急，就在 module.rules那儿改几个字就好！忘了拆包捆包也没关系，只要把 chunks: all设置成true，那么整个node_modules的文件夹都可以直接扔到一个叫vendors~main.js的文件里去。
module.exports = {
// 可以是 none、development、production
// 默认为 production
mode: 'production'
}
终于搞完了，是不是觉得自己学到了很多？希望我这篇文章给你带来点新思路。有任何想问的问题或看法，直接在评论区留言，大家一起来聊聊！别忘记给个赞，分享出去让更多人看到今天咱们聊聊Webpack是怎么把代码搬进网页里的，还有它解决各种难题的办法多厉害。瞅了半天，发现Webpack会自动挑选进出的文件，随时修改输出的内容，又有防篡改的Hash功能，甚至不用怎么设置就能用，模块啥的通吃。希望这些小tips对你们能用上，记得踊跃发发言关注我们的微信公众号，点个赞分享出去，让更多人受益
"build:prod": "webpack --config config/webpack.prod.config.js --mode production"
// webpack.prod.config.js
module.exports = {
mode: 'production',
}
评论0