webpack 配置文件
配置文件 webpack.config.js
// webpack.config.js 是 webpack 打包构建的配置文件
// 我们使用它的第一步就是导出一个对象
// 1. 配置文件是给 webpack 打包用的
// 如果有,就以配置文件的配置为准
// 如果没有,则都走默认
// 2. 该文件就是用来被 Node 执行的
// 因为 webpack 打包构建需要操作文件,webpack 也是基于 Node 开发的
// 3. webpack 打包的时候会自动加载当前模块,读取其中导出的对象,拿到对象中配置项去进行自定义打包构建
// 4. 导出的配置对象中只能按照 webpack 给定的属性来配置,不能乱写
// 5. webpack 打包的时候会自动来读取 webpack.config.js
// 如果想要修改这个文件名,
// 则需要在执行打包命令的时候加上 --config 配置文件名
// 例如:npx webpack --config webpack.config.js
// 6. 但是如果每一次加上这一堆的选项很难记住
// 所以我们推荐把打包的命令配置到 package.json 文件的 scripts 选项中把该命令起个别名存起来
// 7. 接下来我们就可以开心的 npm run build
// 8. 提示,当你把 npx webpack --config webpack.config.js 配置到 scripts 选项中之后,就不需要使用 npx
// 也就是说我们可以:"build": "webpack --config webpack.config.js"
// 由于 webpack.config.js 就是默认文件名吗,所以我们可以:
// "build": "webpack"
// 虽然简单,我们也这么做,因为接下来一步一步的扩展了
const path = require('path')
module.exports = {
entry: './src/main.js', // 指定打包的入口
output: { // 指定打包的出口
path: path.join(__dirname, './dist/'), // 指定打包的结果文件存放的目录路径(注意:必须是绝对路径!)
filename: 'bundle.js' // 指定打包的结果文件名
}
}
npm scripts
{
"name": "demo0",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"jquery": "^3.3.1"
},
"devDependencies": {
"webpack": "^4.5.0",
"webpack-cli": "^2.0.14"
}
}