webpack基本使用

认识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文件作为打包后存放路径

　　//配置打包规则固定写法！！！

　　　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 }

View Code