自行学习整理，边学边记，没了解过webpack的同学可以一点点看完，或许会有些帮助，不成熟的地方欢迎指正，转载请注明出处！！！
1，首先新建文件夹，我这里命名为webpack-test，然后在文件夹内运行
npm init -y
初始化项目，此时应该只有一个package.json文件
2，安装webpack及相关插件至项目
(-D意为开发环境使用的插件，不可省略)
npm i webpack webpack-cli -D
然后可以在“scripts”下加
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
},
这样就可以使用npm run build来进行打包了，也为了方便以后扩展，如果script上一行有"main": "index.js"，把它也删掉，因为入口文件稍后会重新指定
3，新建webpack.config.js文件，这是webpack的配置文件，打包时具体执行内容就是依照此文件
4，新建一个文件夹，命名为src，在src下新建index.js文件，show.js文件，index.html文件，index.css文件，先不用写内容，这时再回到webpack.config.js
5，编辑配置
// 引入路径模块，此模块Node已内置无需额外安装
const path = require('path');
module.exports = () => {
return {
// entry: path.resolve(__dirname, 'src/index.js'), // 是下一行的简写，此时打包后文件为main.js
// entry: {
// main: path.resolve(__dirname, 'src/index.js'),
// },
entry: {
// 如果打包后想叫别的名字还不想在output中写死，可以使用这种方法，output中使用[name]占位符
index: path.resolve(__dirname, 'src/index.js'),
// app: path.resolve(__dirname, 'src/app.js'), // 多入口的第二个入口
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'js/[name].js'
}
}
}
注解：
-
__dirname：被执行文件的绝对路径，因为webpack.config.js在根目录，所以此时__dirname就代表根目录
-
entry：打包入口，webpack打包时会通过入口文件，逐步查找关联的引用文件，现在前端项目大多为单页面应用，一般index.js足够关联所有，目前的写法是为多入口做准备
1、path.resolve可以理解为cd操作，也可以使用path.join（可以理解为拼接）
所以这里可以理解为从根目录cd到src再到index.js
所以也可以这样写path.resolve(__dirname, 'src', 'index.js'), -
output：打包出口
1、path：打包出口路径
2、filename：打包出口文件名，[name]为占位符，是entry中的inedx或main或app，可以保证打包文件具有唯一性
6，写一些东西进index.js和show.js
先在show.js中写
const Show = () => {
console.log('show')
}
export default Show;
然后在index.js中导入show并写一些自己的东西
import Show from './show.js';
Show();
console.log(111);
7，运行打包
npm run build
此时webpck会以默认的production模式进行打包，如果不出意外会多出一个dist文件夹，里面的js文件就是打包文件，但production模式对观察不太方便
8，打包模式
我们可以在webpack.config.js内加入mode，mode设置为none，这是为了方便观察打包后的结构，平时开发可以设置为development，正式上线之前可以设置为production
const path = require('path');
module.exports = () => {
return {
mode: 'none', // development production
// entry: path.resolve(__dirname, 'src/index.js'),
entry: path.resolve(__dirname, 'src', 'index.js'),
// entry: {
// build: [path.resolve(__dirname, 'src/index.js')]
// },
output: {
filename: 'js/[name].js',
path: path.resolve(__dirname, 'dist'),
}
}
}
然后再运行npm run build，有兴趣的同学这时可以观察一下打包出来的内容，了解一下打包原理，这里不进行展开
9，终端运行不同模式打包
上面说我们可以手动更改mode的值去更改打包模式，但每次都要编辑文件比较麻烦，忘了改动也是问题，所以这里我们要更改 package.json 文件，以后每次运行不同模式只要 npm run 不同的build就行了。
在第二点中，我们有"build": "webpack"，现在把它进行更改，然后可以删除上一步添加的mode:'none'了
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build-dev": "webpack --mode=development",
"build-pro": "webpack --mode=production"
},
当然也可以把build-dev，build-pro命名为自己习惯的名字，然后终端运行
开发模式时
npm run build-dev
生产模式时
npm run build-pro
这样我们就可以方便的按心情打包了
网友评论