webpack.config.js 是 webpack 的默认打包配置文件。也可以npx webpack --config 配置文件名
手动设置
/** * Wepack配置接口 */ const path = require("path"); module.exports = { // 打包模式 mode: "production", // 入口 entry: "./index.js", // 出口 output: { filename: "bundle.js", // path 后必须是一个绝对位置 path: path.resolve(__dirname, "bundle"), }, };
其中entry: "./index.js"
是一个简写,
entry: { main: "./index.js" }
打包模式,有生产环境与发布环境两种,默认是发布环境。
当没有显示制定时会输出下面内容:
WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment. You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/
最后都会讲其写入到 html 的 script 标签中
entry:{ main: 'a/index.js', sub: 'b/main.js' } // 多个入口是不可打包为同一个JS的, output: { filename: '[name].js' }
比如静态资源都放在 CDN 上,那么希望打包出 srcipt 的 src 是一个 http 地址 可这样做:
output: { publicPath: 'http://cdn.cn' filename: '[name].js' }
devtool 就是去配置 sourcemap,方便调试,能准确定位到代码错误
最好的配置:
// 开发时 devtool: 'cheap-module-eval-source-map', // 线上环境: devtool: 'cheap-module-source-map'
本文作者:前端小毛
本文链接:
版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!