Webpack 4.XXX 配置文件webpack.config.js和package.json【使用方法总结】

第一部分：package.json 配置scripts 字段

package.json 里面的

scripts

字段值里，添加三个字段：其中字段名可以根据自己的喜好来指定

"scripts": {
"dev": "./node_modules/.bin/webpack --mode development",
"build": "./node_modules/.bin/webpack  --mode product",
"des": "./node_modules/.bin/webpack-dev-server"
}

然后就可以使用

npm run dev

和

npm run build

命令，即可分别打包为：开发环境的项目文件，和生产环境的项目文件

通常开发，都会使用

webpack-dev-server

插件， 这时运行

npm run des

进行开发更方便。

第二部分： webpack 命令的使用

Webpack 4.xxx 打包命令必须加 -o

• webpack 3.x 时我们用

  webpack entry.js bundle.js

  将

  entry.js

  文件打包为

  bundle.js

  
  更新后命令语法更严格：

  webpack entry.js -o bundle.js

  将

  entry.js

  文件打包为

  bundle.js

Webpack 4.xxx 打包必须指定模式（product / development）

• webpack ./entry.js -o entry.bundle.js --mode development

  增加了

  --mode development

  模式指定部分。

第三部分：配置文件webpack.config.js

配置1 最简陋的配置， 入口简写，出口自动跟随入口字段，默认输出main.js

const path = require('path');

module.exports = {
entry: path.resolve(__dirname, './src/index.js'),
//当且仅当你的src下存在  index.js 文件时，可以写path.resolve(__dirname, './src/')
//即省略index.js文件，因为 index.js 是默认的js入口文件名，其它js文件名，则必须完整写到路径中
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].js'
}
}

//会被打包为 dist/main.js
//[name].js 意思是 结果文件名跟随入口文件的配置字段
//这里，由于entry的值只有一个，省去了字段配置，所以[name].js的默认输出值为main.js

配置2 上面是懒人方法，这里手动定义入口字段为entry1，不使用默认值

const path = require('path');

module.exports = {
entry: {
entry1: path.resolve(__dirname, './src/index.js')
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].js'//'[name].js'
}
}

//会被打包为 dist/entry1.js文件

配置3 入口字段值，加入多个入口 home 和 product

const path = require('path');

module.exports = {
entry: {
home: path.resolve(__dirname, './src/home/index.js'),
product: path.resolve(__dirname, './src/product/index.js')
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].js'
}
}

//打包结果是 同为dist目录下的 product.js和 home.js两个文件，结果并不如意
//实际中我们希望它的结果是：分别为/dist/home/xxx.js和/dist/product/xxx.js这样的效果

配置4 项目文件里面js分类，打包结果却没分类？更糟糕的是都没分类：

const path = require('path');

module.exports = {
entry: {
home: path.resolve(__dirname, './src/index1.js'),
product: path.resolve(__dirname, './src/index2.js')
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].js'
}
}

//打包结果和上面配置3的一样，同为dist目录下的 product.js和 home.js两个文件

配置5 分类问题暂不解决！再踩踩坑：相同的入口字段，后面的会覆盖前面的字段，这和js语法特性一样，没毛病

const path = require('path');

module.exports = {
entry: {
home: path.resolve(__dirname, './src/index1.js'),
home: path.resolve(__dirname, './src/index2.js')
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].js'
}
}

//打包结果是dist/home.js, 其内容是./src/index2.js里面的内容
//这和js对像的属性一样，相同的属性值，后面的值会覆盖前面的值生效，没毛病

配置6 哪怕配置5中指定输出文件名，还是后面一条字段值生效，还是没毛病

const path = require('path');

module.exports = {
entry: {
home: path.resolve(__dirname, './src/index1.js'),
home: path.resolve(__dirname, './src/index2.js')
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'app.js'//指定输出文件名
}
}

//结果和配置5一样---打包结果是dist/home.js, 其内容是./src/index2.js里面的内容

配置7 终于有点区别的来了，当配置多个入口字段，却指定一个输出文件时，第一个入口生效

const path = require('path');

module.exports = {
entry: {//配置多个入口字段
home: path.resolve(__dirname, './src/index1.js'),
product: path.resolve(__dirname, './src/index2.js')
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'app.js'//指定一个输出文件！
//当命名输出时，只会输出一个文件
}
}

//结果和配置5一样---打包结果是dist/home.js, 其内容是./src/index2.js里面的内容

配置8 输出字段output的 filename 可以解决所有打包分类的问题（1）

//最实用的来了，解决上面古时期提出的分类问题
const path = require('path');

module.exports = {
entry: {
home: path.resolve(__dirname, './src/index1.js'),
product: path.resolve(__dirname, './src/index2.js')
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name]/[name].js'
}
}

//打包结果是 dist/home/home.js 和 dist/product/product.js
//总结： 入口文件的分类和打包结果一毛钱关系都没有,
////////可以将毫不相干的两个文件打包在同一文件夹，或者任意分类.

配置9 输出字段output的 filename 可以解决所有打包分类的问题（2）

const path = require('path');

module.exports = {
entry: {
home: path.resolve(__dirname, './src/index1.js'),
product: path.resolve(__dirname, './src/index2.js')
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name]/index.js'
}
}

//打包结果是 dist/home/index.js 和 dist/product/index.js
//总结： 这样最符合我的分类习惯了
//[name]非常好用

配置9 输出字段output的 filename 可以解决所有打包分类的问题（3）

//[name]分类不够爽的话，可以手动添加分类和[name]配合使用
const path = require('path');

module.exports = {
entry: {
home: path.resolve(__dirname, './src/index1.js'),
product: path.resolve(__dirname, './src/index2.js')
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: './js/[name]/index.js'
}
}

//打包结果是 dist/js/home/index.js 和 dist/js/product/index.js
//总结： 至此，我们可以用自定义文件配合[name]这样的组合将分类玩得更爽更顺滑了

配置10 源文件的分类结构和打包结果没有关系，不过为了方便理解，我们习惯把它们都设置为相似的结构

const path = require('path');

module.exports = {
entry: {
home: path.resolve(__dirname, './src/file1/file2/index1.js'),
product: path.resolve(__dirname, './src/index2.js')
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].js'
}
}
//这样两个入口文/home.js 和 dist/product 下，只为理解，没有实用之处实用之处

总结： [name]可以作为文件名或者文件夹名，它的值跟随入口对象下的各字段值，可以解决分类上的所有问题。

阅读更多