阿尔卑斯丶
圣骑士
圣骑士
  • 最后登录2023-11-03
  • 发帖数59
  • 社区居民
  • 原创写手
阅读:4836回复:2

[vue]初识webpack

楼主#
更多 发布于:2020-03-13 12:14
我们常用的webpack估计只是在vue的脚手架中进行一些简单的webpack更改,看到大段的webpack内容感到头大,但是当下越来越多的公司在岗位要求上都加上了一条能够熟悉webpack的配置,在找工作的这段时间里我决定啃一啃webpack这块老骨头。

图片:clipboard.png





我们在上边图片中能看到简单的webpack分为上述五大块。那么我们就来详细讲一下每一个是用做什么的


一、entry
entry是用作webpack的入口文件,因为webpack是一个模块打包器,所以会把一切资源都当成是一个一个的模块(js、html、css图片等),会根据入口文件寻找其依赖关系,形成一颗依赖树,在遍历完成这个依赖树之后才会生成打包之后的一些资源;

entry分为两种,单入口文件和多入口文件,单入口文件的写法是:
module.exports = {
  entry:'./src/index.js'
}
多入口文件的写法是:
module.exports = {
  entry:{
    index:'./src/index.js',
    search:'./src/search.js'
   }
}


二、output

output用来告诉webpack如何将编译后的文件输出到磁盘;
output也分为单入口和多入口写法:
单入口:
const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
  entry:'./src/index.js', //入口文件
  output:{
    path:path.join(__dirname,'dist'),
    filename:'index.js'
  },
};
多入口:
const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
  entry:{
    indexx:'./src/index.js',
    seee:'./src/search.js'
  }, //入口文件
  output:{
    path:path.join(__dirname,'dist'),
    filename:'[name].js'
  },
};
不同之处在于多入口文件中filename是使用了一个[name]的占位符,这个占位符是和entry对象的键名对应;


三、loaders

webpack开箱即用只支持JS和JSON两种文件类型,通过Loaders可以去支持其他文件类型并把他们转成有效的模块,并且添加到依赖图中;loaders本身是一个函数,接受源文件作为参数,并且返回转换的结果;loaders的写法是:
const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
  entry:{
    indexx:'./src/index.js',
    seee:'./src/search.js'
  }, //入口文件
  output:{
    path:path.join(__dirname,'dist'),
    filename:'[name].js'
  },
  mode:'production',
  module:{
    rules:[
      {
        test:/.js$/,
        use:'babel-loader'
      },
      {
        test:/.vue$/,
        use:'vue-loader'
      }      
    ]
  },
};
module对象中包含一个rules的数组,数组中分为test代表编译的后缀,use是使用的loader名称

四、plugins
插件用于打包输出文件的优化,资源管理和环境变量注入,plugins作用于整个构建过程;可以理解为任何loaders没办法完成的任务可以让plugins去完成;

图片:plugins.png








五、mode
Mode是用来指定当前打包的环境,里边有三个值:production(生产阶段)、development(开发阶段)、none。
接下来我们写一个能够解析vue文件的webpack配置:


首先我们安装webpack
第一步:我们需要先安装node,这里我就不多做演示;第二步:我们通过
npm init  -y
进行安装,这里的-y是我们默认全部选择yes进行安装,安装完之后会发现目录中会出现一个package.json文件
第三步:我们安装webpack及webpack的脚手架
npm install webpack  webpack-cli --save-dev
第四步:我们使用
./node_modules/.bin/webpack -v
来查看我们的webpack安装版本


然后我们进行webpack的配置

第一步:创建webpack.config.js文件
第二步:安装vue、vue-loader vue-template-comiler,使用命令
npm i vue vue-loader vue-template-compiler -D
进行安装
第三步:创建src文件夹,在其中创建vue文件,这里我们创建一个app.vue文件
<template>
  <div class="app">
    pw_msg
  </div>
</template>
<script>
export default {
  data(){
    return {
      msg:'我是一个保安'
    }
  }
}
</script>
第四步,在src文件夹下边创建index.js文件
import vue from 'vue';
import App from './app.vue';
const root  = document.createElement('div');
document.body.appendChild(root);
new vue({
  render:(h)=>h(App)
}).$mount(root)
第五步:在我们的webpack.config.js中进行配置
module.exports = {
  entry:'./src/index.js',
  output:{
    path:path.join(__dirname,'dist'),
    filename:'main.js'
  },
  module:{
    rules:[
      {
        test:/.vue$/,
        use:'vue-loader'
      }
    ]
  },
  plugins:[
    new VueLoaderPlugin()
  ]
}
第六步:我们可以使用如下命令进行打包
./node_modules/.bin/webpack
但是我们看到这条代码又长还不好记,那么我们应该咋办呢?
我们可以在package.json中做如下改动
"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "build": "webpack"
},
我们在script下新增一条build,如上代码
然后我们使用如下代码进行打包,是不是看着就很舒服了呢?
npm run build
打包完成之后,如何检测我们打包的是否正确呢?我们可以在dist文件夹下边创建一个html文件,将dist文件夹下的main.js通过script标签引入进去,在浏览器中即可看到效果。


这篇文章写完了,你学会了吗?


回帖推荐

阿尔卑斯丶 发表于2楼  查看完整内容

附上github地址: https://github.com/exwangwei/webpack-vue-demo

最新喜欢:

ButterflyButter... doubleyongdouble...
doubleyong
管理员
管理员
  • 最后登录2024-03-15
  • 发帖数1164
  • 最爱沙发
  • 喜欢达人
  • 原创写手
  • 社区居民
  • 忠实会员
沙发#
发布于:2020-03-13 16:18
楼主写的很详细哦,666
知识需要管理,知识需要分享
阿尔卑斯丶
圣骑士
圣骑士
  • 最后登录2023-11-03
  • 发帖数59
  • 社区居民
  • 原创写手
板凳#
发布于:2020-03-13 12:45
游客


返回顶部

公众号

公众号