vue——模块化开发之webpack

在vue的模块化开发中需要用到webpack

webpack是一个现代的JavaScript应用的静态模块打包工具

• 两个核心：模块化、打包

• webpack让我们可能进行模块化开发，并且会帮助我们处理模块间的依赖关系。css，图片，json文件等等在webpack中都可以被当作模块来使用

---

grunt/gulp

• grunt/gulp的核心是task
• 我们可以配置一系列的Task,并且定义task要处理的事务（例如ES6,ts转化，图片压缩，scss转成css)，之后让grunt/gulp来执行这些task，而让整个流程自动化
• 所以grunt/gulp也被称为前端自动化任务管理工具
• 如果工程依赖非常简单，甚至没有用到模块化的概念，只需要进行简单的合并、压缩，就使用grunt/gulp

---

webpack和grunt/gulp的对比

• grunt/gulp更加强调的是前端流程自动化，模块化不是核心。
• webpack更加强调模块化开发管理，而文件压缩合并、预处理等功能，是附带功能。

---

webpack全局安装/局部安装

• 每个项目都要本地安装webpack，

// 开发时依赖
"devDependencies": {

  "webpack": "^3.6.0"

 }

• package.json中的scripts的脚本在执行时会按照一定的顺序寻找命令对应的位置。首先会在本地的node_modules/bin路径中找对应的命令，如果没有找到才会去全局的环境变量中找。

---

loader

• loader是webpack中一个非常核心的概念

• 不同的loader处理不同的文件

• 使用步骤

  • 安装 loader，使用到哪些就安装哪些loader

    //css
    npm install css-loader style-loader --save-dev
    //less
    
    //
    //vue
    npm install vue-loader vue-template-compiler --save-dev
    

  • 在配置文件中配置

    module: {
            rules: [
              {
                test: /\.css$/,
                // css-loder只负责将css文件进行加载
                // style-loder负责将样式添加到DOM中
                use: [ 'style-loader','css-loader' ]
              },
              {
                test: /\.less$/,
                // 将 css-loader、style-loader 和 less-loader 链式调用，
                // 可以把所有样式立即应用于 DOM。
                use: [{
                    loader: "style-loader" 
                }, {
                    loader: "css-loader" 
                }, {
                    loader: "less-loader" // compiles Less to CSS
                }]
              },
              {
                test: /\.(png|jpg|gif)$/,
                use: [
                  {
                    loader: 'url-loader',
                    options: {
                      // 当加载的图片，小于limit时，会将图片编译成base64字符串形式
                      // 大于Limit时，需要使用file-loader模块进行加载
                      limit: 10000，
                      // images => 文件要打包到的文件夹
                      // [name] => 获取图片原来的名字
                      // [hash:8] => 为了防止图片名称冲突，使用Hash，保留8位
                      // [ext] => 保留图片的拓展名
                      name: 'images/[name].[hash:8].[ext]'
                    }
                  }
                ]
              }
            ]
          }
    

• 使用多个loader时，webpack是从右向左读的。

• webpack处理图片文件时会将其打包到dist文件夹里，所以要在配置文件中配置publicPath: ‘dist/’,之后webpack打包遇到url时会在路径前自动加上’dist/’。

---

webpack打包的js文件并没有将es6语法转成es5，那么就意味着一些对es6还不支持的浏览器没有办法很好的运行代码。这时就需要使用babel。

• babel

  • 安装

    npm install --save-dev babel-loader@7 babel-core babel-preset-es2015
    

  • 在配置文件中配置

     		{
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                  loader: 'babel-loader',
                  options: {
                    presets: ['es2015']
                  }
                }
              }
    

---

• 引入vuejs

  • 使用npm安装

    npm install vue --save
    

  • vue构建时有两个版本

    • runtime-only =>代码中，不可以有任何的template
    • runtime-compiler =>代码中可以有template，因为有compiler可以编译template

  • 默认是用runtime-only，所以这时我们得配置,用alias对象指定使用版本

    resolve: {
          alias: {
            'vue$': 'vue/dist/vue.esm.js'
          }
        }
    

  • el 和 template的区别

    • 在vue实例中，一旦定义了一个template，vue内部会将el挂载的内容替换成template所有的内容。

---

• plugin

  • plugin是插件的意思，通常是用于对某个现有的架构进行扩展

  • webpack中的插件，就是对webpack现有的功能的各种扩展，比如打包优化，文件压缩等等

  • loader 和 plugin的区别

    • loader主要用于转换某些类型的模块，它是一个转换器
    • plugin是插件，它是对webpack本身的扩展，是一个扩展器

  • plugin的使用过程

    • 通过npm安装需要使用的plugins
    • 在配置文件中的plugin进行配置

  • 打包html的plugin

    npm install html-webpack-plugin --save-dev
    

---

• 搭建本地服务器

  • webpack提供了一个本地开发服务器，这个本地服务器基于node.js搭建，内部使用express框架，

  • 安装webpack-dev-server

  • 配置

     devServer: {
          contentBase: './dist',
          // 进行实时监听
          inline: true
        }
    

      "dev": "webpack-dev-server --open"
    

---