认识webpack
1.什么是webpack
Webpack 是一个打包模块化 JavaScript 的工具，在 Webpack 里一 切文件皆模块，通过 Loader转换文件，通过 Plugin注入钩子，最后输出由多个模块组合成的文件。 Webpack专注于构建模块化项目。
webpack是一个前端项目构建工具，他是基于nodejs开发出来的一个前端工具
2.webpack对我们有什么帮助？
注于处理模块化的项目，能做到开箱即用、一步到位
可通过+Plugin +扩展，完整好用又不失灵活
使用场景不局限于+Web+开发
语法打包兼容低版本浏览器
3.Webpack的缺点是只能用于模块化开发的项目
开始使用webpack
- 安装nodejs，现在npm会跟着node安装一起安装。安装后 使用 node -v npm -v 查看版本号，显示ok表示安装没问题
- 安装 webpack npm i(nstall) webpack【@4/5 --- 这里表示版本号 可以不带，不带默认装最新版本 】 webpack-cli -D【-D 表示开发时依赖】 ===》 安装 webpack 和 webpack-cli
- 新建webpack.config.js webpack配置文件
- 执行打包命令 npx webpack 【一般会在package.json中配置简易指令 script属性中，添加 “bulid”:"webpack"】，然后 npm run bulid 表示执行打包命令
webpack配置
《webpack.config.js》
const path = require('path')
module.exports = { //导出一个对象
entry: './src/main.js', //打包入口
/*打包出口,一个对象，指定
filename：打包后的js名
path，打包后的路径
*/
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
/*由于这里需要绝对路径，需要用到nodejs种的path模块
__dirname 表示当前文件夹的绝对路径，
这里表示在项目跟目录下新建dist文件作为打包后存放路径
*/
}, //到这里就是webpack最基本的配置【webpack默认只能打包js文件】，没有用到各种加载器【loader】，插件【Plugin】，借助两者去处理js，css，img,.vue等复杂模块，
}
使用Loader工具去打包指定后缀名的文件
- 打包.vue 使用 vue-loadery& vue-template-compiler &css-loader
const path = require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
//官网除了表示配置打包规则rules，还要实例化一个vueloader插件
module.exports = { //导出一个对象
mode:'development/production',//开发模式【体积打，打包后的代码可读性强】和生产模式【体积小，打包后的代码完全压缩，代码基本不具备可读性】
entry: './src/main.js', //打包入口
/*打包出口,一个对象，指定
filename：打包后的js名
path，打包后的路径
*/
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
/*由于这里需要绝对路径，需要用到nodejs种的path模块
__dirname 表示当前文件夹的绝对路径，
这里表示在项目跟目录下新建dist文件作为打包后存放路径
*/
}, //到这里就是webpack最基本的配置【webpack默认只能打包js文件】，没有用到各种加载器【loader】，插件【Plugin】，借助两者去处理js，css，img,.vue等复杂模块，
//配置打包规则 固定写法！！！
module: {
rules: [{
test: /.vue$/, // 正则表示匹配.vue结尾的文件
loader: 'vue-loader',
}]
},
plugins: [
new VueLoaderPlugin(), //vue插件实例
]
}
到这里使用webpack就已经可以正常打包js以及.vue后缀的文件了，但是有一个问题就是 npm 安装的Vue 中会生成三个js文件：
- runtime-only 运行时的 vue.common.js
- compiler-only 编译时的compiler.js
- runtime+compiler 兼备的vue.js
而webpack默认会去找到vue.common.js然后打包导出，导致页面运行还是有问题。=》解决：配置 vue别名，默认找到vue.js 打包导出
1 const path = require('path') 2 3 const VueLoaderPlugin = require('vue-loader/lib/plugin') 4 //官网除了表示配置打包规则rules，还要实例化一个vueloader插件 5 6 module.exports = { //导出一个对象 7 mode: 'development', 8 entry: './src/main.js', //打包入口 9 /*打包出口,一个对象，指定 10 filename：打包后的js名 11 path，打包后的路径 12 */ 13 output: { 14 filename: 'bundle.js', 15 path: path.resolve(__dirname, 'dist') 16 /*由于这里需要绝对路径，需要用到nodejs种的path模块 17 __dirname 表示当前文件夹的绝对路径， 18 这里表示在项目跟目录下新建dist文件作为打包后存放路径 19 */ 20 }, //到这里就是webpack最基本的配置，没有用到各种处理器处理js，css，img等资源 21 module: { 22 rules: [{ 23 test: /.vue$/, // 正则表示匹配.vue结尾的文件 24 loader: 'vue-loader', 25 }] 26 }, 27 plugins: [ 28 new VueLoaderPlugin(), //vue插件实例 29 ], 30 resolve: { //表示一些解决方案 31 alias: { //别名 32 'vue': 'vue/dist/vue.js', //这里表示导入vue时，导入此处指定路径下的文件 33 } 34 } 35 }
总结：webpack本身只能打包js文件，打包其他文件，例如 vue组件.vue文件，.css等就需要借助loader；
loader就是一组抓门用于打包特定文件的处理程序。