Vue02_用webpack搭建环境

1. 初始化项目

1). 生成package.json
    yarn init -y

2). 创建入口js: src/index.js
    console.log('Hello Webpack!')
    document.getElementById('root').innerHTML = '<h1>Hello222</h1>'

3). 创建页面文件: index.html
    <div id="root"></div>

2. webpack基本使用

1). 下载依赖包
    yarn add -D webpack webpack-cli // webpack用来编译打包 webpack-cli用来提供webpack命令
    yarn add -D html-webpack-plugin // 打包html，自动引入打包后的js/css

2). 创建webpack配置: webpack.config.js
    const path = require('path')
    const HtmlWebpackPlugin = require('html-webpack-plugin')

    module.exports = {
      // 模式: 生产环境
      mode: 'production',
      // 入口
      entry: {
        app: path.resolve(__dirname, 'src/index.js')
      },
      // 出口(打包生成js)
      output: {
        filename: 'static/js/[name].bundle.js',
        path: path.resolve(__dirname, 'dist')
      },
      // 模块加载器
      module: {
        rules: [

        ]
      },
      // 插件
      plugins: [
        new HtmlWebpackPlugin({
          template: 'index.html',
          filename: 'index.html'
        })
      ]
    }

3). 生成环境打包并运行
    配置打包命令:  "build": "webpack --mode production"
    打包项目: yarn build
    运行打包项目: serve dist

3. 开发环境运行

1). 现在的问题:
    每次修改项目代码后, 必须重新打包, 重新运行

2). 下载依赖包
    yarn add -D webpack-dev-server  //自动打包运行，在浏览器显示运行结果

3). 配置开发服务器
    devServer: {
      port: 8080,
      open: true, // 自动打开浏览器
      //quiet: true, // 不做太多日志输出
    },

4). 配置开启source-map调试
    devtool: 'cheap-module-eval-source-map',

5). 开发环境运行
    配置命令: "dev": "webpack-dev-server --mode development"
    执行命令: yarn dev

4. 打包处理 ES6/CSS/图片

1). 处理ES6 -> ES5
    a. 下载依赖包
        yarn add -D babel-loader @babel/core @babel/preset-env
    b. 配置
        {
          test: /\.js$/,  // 用于匹配文件
          //exclude: /(node_modules|bower_components)/,  // 排除文件
          include: path.resolve(__dirname, 'src'), // 只针对哪些处理
          use: {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-env']
            }
          }
        }

2). 处理CSS
    a. 下载依赖包
        yarn add -D css-loader style-loader
    b. 配置
        {
          test: /\.css$/,
          use: ['style-loader', 'css-loader'], // 多个loader从右到左处理
        }

3). 处理图片
    a. 下载依赖包
        yarn add -D url-loader@2.3.0 file-loader@4.3.0
    b. 配置
        {
          test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
          loader: 'url-loader',
          options: {
            limit: 8192,
            name: 'static/img/[name].[hash:7].[ext]' // 相对于output.path
          }
        }
4). 测试
    a. 添加图片: src/assets/imgs/logo.png
    b. 添加css: src/assets/css/my.css
        img {
          width: 200px;
          height: 200px;
        }
    c. index.js
        import logo from './assets/imgs/logo.png'
        import  './assets/css/my.css'

        const image = new Image()
        image.src = logo
        document.body.appendChild(image)
        document.getElementById('root').innerHTML = '<h1>Hello222</h1>'

5. 搭建vue的环境

0). 文档:
    https://vue-loader.vuejs.org/zh/

1). 下载依赖包:
    yarn add vue
    yarn add -D vue-loader vue-template-compiler

2). 配置
    const VueLoaderPlugin = require('vue-loader/lib/plugin')

    {
      test: /\.vue$/,  
      include: path.resolve(__dirname, 'src'),
      loader: 'vue-loader'
    }

    {
      test: /\.css$/,
      use: ['vue-style-loader', 'css-loader'], // vue-style-loader替换style-loader
    }

    // plugins下添加
    new VueLoaderPlugin()

    // 配置引入模块的解析
    resolve: {
      extensions: ['.js', '.vue', '.json'], // 可以省略的后缀名
      alias: { // 路径别名(简写方式)
         // 表示精准匹配 import Vue from 'vue'相当于vue/dist/vue.esm.js'，带vue编译器
        'vue$': 'vue/dist/vue.esm.js',  
      }
    }

3). 编码: 
    src/App.vue
    src/index.js

区分使用生产环境与开发环境

使用生产环境:
    npm run build   ==> webpack
    1). 在内存中进行编译打包, 生成内存中的打包文件
    2). 保存到本地(在本地生成打包文件)   ===> 此时还不能通过浏览器来访问, 需要手动启动服务器运行
使用开发环境
    npm run dev   ==> webpack-dev-server
    1). 在内存中进行编译打包, 生成内存中的打包文件
    2). 启动服务器, 运行内存中的打包文件   ===> 可以通过浏览器虚拟路径访问