Webpack的学习（二）

npm安装vue

npm install vue --save

webpack.config.js中配置

    resolve: {
        // 别名
        alias: {
            // 以vue结尾
            'vue$': 'vue/dist/vue.esm.js'
        }
    }

1. runtime-only -> 代码中，不可以有任何的template
2. runtime-compile -> 代码中，可以有template，因为有compile可以用于编译template

安装 vue-loader 和 vue-template-compiler

npm install vue-loader vue-template-compiler --save-dev

webpack.config.js中

    rules: [
      // ... 其它规则
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]
  },
 
  plugins: [
    // 请确保引入这个插件！
    new VueLoaderPlugin()
  ]

这个插件是必须的！ 它的职责是将你定义过的其它规则复制并应用到 .vue 文件里相应语言的块。例如，如果你有一条匹配 /.js$/ 的规则，那么它会应用到 .vue 文件里的 script> 块。

Webpack的插件使用

设置 版权 的插件

webpack自带的插件
webpack.config.js

const webpack = require('webpack')

module.exports = {
    plugins: [
        new webpack.BannerPlugin('每个js文件添加版权 ~~~~')
    ]

}   

htmlWebpackPlugin -> 打包html的插件

• 自动生成一个index.html文件(可以指定模板来生成)
• 将打包的js文件,自动通过script标签插入到Body中

安装

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

修改webpa.config.js文件

const htmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    plugins: [

        new htmlWebpackPlugin({
            // template: path.join(__dirname, './src/index.html'), //  指定模板界面 生成内存中的html                               
            template: 'index.html',
            filename: 'index.html'  // 指定生成的页面名称
        })
    ]

}

压缩js的插件 uglifyjs-webpack-plugin@1.1.1

安装

npm install uglifyjs-webpack-plugin@1.2.0 --save-dev

配置
webpack.config.js

const uglifyjdWebpackPlugin = require('uglifyjs-webpack-plugin')
module.exports = {
    plugins: [

        // js压缩插件
        new uglifyjdWebpackPlugin({
            test: /\.js($|\?)/i
        })
    ]
}

搭建本地服务器

安装

npm install webpack-dev-server@2.9.3 --save-dev

配置

module.exports = {

    devServer: {
        // port: '',
        contentBase: './dist',
        inline: true, // 实时刷新页面

    }
}

package.json

{
        "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "build": "webpack",
        "dev": "webpack-dev-server"
    },
}

运行

npm run dev

npm run dev --open  # 默认打开浏览器

配置抽离

• 安装

npm install webpack-merge --save-dev

• 分离文件
  创建build文件夹，然后分别创建
  base.config.js, dev.config.js, product.config.js
  从webpack.config.js中, 分离出 生产环境需要的配置 和
  开发使需要的配置，将基本的配置放到base.config.js中。

最后直接删除webpack.config.js文件

• 配置package.json

    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "build": "webpack --config ./build/product.config.js",
        "dev": "webpack-dev-server --open --config ./build/dev.config.js"
    },

• 然后分别测试 npm run build 和 npm run dev 使否能执行成功

ES6转ES5语法处理

需要将ES6语法转成ES5，那么就需要使用label

• 而在webpack中，我们直接使用label对应的loader就可以了

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

配置webpack.config.js文件

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

重新打包，查看bundle.js文件，发现其中的内容变成了ES5的语法

前端模块化

前端

现在最常用的 是 commonJS 和 ES6

核心思想：导出 和 导入

commonsJS

• 导出

module.export = function () {
    obj = {

    }
    return obj;
}

• 导入

obj = require('./aaa.js')

ES6

• 导出

  • 导出方式一

  export {
      flag, num
  }
  

  • 导出方式二

  export var num1 = 999
  export var height = 1.88
  

  • 导出函数/类

  export function sum(num1, num2) {
      return num1 + num2, 
  }
  // ES6中的类
  export class Persion {
      run () {
          console.log('类。。。')
      }
  }
  
  

  • export default 自定义名字

  const address = '北京市'
  export default address
  // 使用default导出，导入的时候可以自定义命名
  // 默认只能有一个 default
  

• 导入

在应用js文件的时候，需要被类型设为module

<script src="./01-bbb.js" type="module"></script>

1. 导入自定义变量

import {flag, sum} from './aaa.js'

2. 直接导入export定义的变量

import {num1, height} from './aaa.js'

3. 导入export的function

import {sum} from './aaa.js'

const p = new Persoon()
p.run()

import addr from './aaa.js'

4. 导入所有，导入成对象的形式

import * as obj from './aaa.js'