vue.js笔记五

vue

字数统计: 1.5k阅读时长: 7 min

 2021/05/26   Share

一、Webpack详解

1、概念

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

2、Webpack安装

全局安装 -g

1	npm install webpack@3.6.0 -g //全局安装

局部安装

如果在package.json中定义了script时，其中包含了webpack命令，那么就是局部安装

3、配置webpack

项目初始化–生成package.json

npm init

{
  "name": "webpack-01",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^5.37.0"
  }
}

配置入口文件，出口文件

const path = require('path')

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
}

js代码

// ./src/main.js
const math = require("./mainUtils.js")

console.log("hello vue")
console.log(math.add(20, 30));
console.log(math.mul(20,30))
// ./src/mainUtils.js
function add(num1, num2) {
  return num1 + num2
}

function mul(num1, num2) {
  return num1 * num2
}

module.exports = {
  add,
  mul
}

通过package.json中设置的build简化运行的操作
1
npm run build

3、加载css img 等文件

需要安装的插件

npm install --save-dev css-loader
npm install style-loader --save-dev
npm install --save-dev url-loader
npm install --save-dev file-loader

webpack.config.js

module: {
    rules: [
      {
        test: /\.css$/,
        use: [ 'style-loader', 'css-loader' ]
      },
      {
        test: /\.(png|jpg|gif|jpeg)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              limit:12000,
              name: 'img/[name].[hash:8].[ext]'
            }
          }
        ]
      }
    ]
  }

4、ES6语法处理（理论可行，尝试后不起作用）

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

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

5、vue配置

安装vue
1
npm install vue --save

配置webpack.config.js

module.exports = {
  // 配置默认使用哪个版本的vue.js
  resolve:{
    alias:{
      'vue$':'vue/dist/vue.esm.js'
    }
  }
}

main.js

import Vue from 'vue'

const app = new Vue({
  el:'#app',
  data:{
    message:'hello'
  },
  methods:{
    btnClick(){
      console.log("ceshi");
    }
  },
  template:`
    <div>
      <h2>{{message}}</h2>
      <button @click="btnClick">按钮</button>
    </div>
  `

})

6、vue 组件化开发引入

vue-loader v15版本会报错。

解决方案:回退到14版本
1
2
npm uninstall vue-loader
npm install vue-loader@14.2.2

vue/App.vue

<template>
  <div>
    <h2 class="title">{{message}}</h2>
    <button @click="btnClick">按钮</button>
    <h2>{{name}}</h2>
  </div>
</template>

<script>
  export default {
    name: "App",
    data() {
      return {
        message: 'Hello Webpack',
        name: '111'
      }
    },
    methods: {
      btnClick() {
        console.log("ceshi");
      }
    }
  }
</script>

<style scoped>
  .title {
    color: green;
  }
</style>

App.vue 再引入Cpn.vue

//App.vue
<template>
  <div>
    <h2 class="title">{{message}}</h2>
    <button @click="btnClick">按钮</button>
    <h2>{{name}}</h2>
    <Cpn/>
  </div>
</template>

<script>
  import Cpn from './Cpn.vue'
  export default {
    name: "App",
    data() {
      return {
        message: 'Hello Webpack',
        name: '111'
      }
    },
    methods: {
      btnClick() {
        console.log("ceshi");
      }
    },
    components:{
      Cpn
    }
  }
</script>

<style scoped>
  .title {
    color: green;
  }
</style>

//Cpn.vue
<template>
  <div>
    <h2>我是cpn组件的标题</h2>
    <p>我是cpn组件的内容, 哈哈哈</p>
    <h2>{{name}}</h2>
  </div>
</template>

<script>
  export default {
    name: "Cpn",
    data() {
      return {
        name: 'CPN组件的name'
      }
    }
  }
</script>

<style scoped>

</style>

二、plugin

1、概念

plugin是插件的意思，通常是对某个现有架构进行扩展，他是对webpack本身的一个扩展，是扩展器，比如打包优化，文件压缩等，某些webpack已经内置的插件不需要安装

2、使用方法

通过npm安装
在webpack.config.js中plugins中配置插件

3、webpack自带插件按BannerPlugin——添加最终版权插件

修改webpack.config.js

const webpack = require('webpack')
module.exports = {
    plugins:[
    new webpack.BannerPlugin('最终版权归aaaa')
  ]
}

4、HtmlWebpackPlugin插件——打包html的plugin插件

npm安装插件

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

修改webpack.config.js

//引入插件
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    plugins:[
    new webpack.BannerPlugin('最终版权归aaaa'),
    // 可以根据模板生成index.html
    new HtmlWebpackPlugin({
      template:'index.html'
    })
  ]
}

5、uglifyjs-webpack-plugin——js压缩的plugin插件

npm安装

1	npm install uglifyjs-webpack-plugin --save-dev

配置webpack.config.js

const uglifyJsPlugin = require('uglifyjs-webpack-plugin')
module.exports = {
    plugins:[
    new webpack.BannerPlugin('最终版权归aaaa'),
    new HtmlWebpackPlugin({
      template:'index.html'
    }),
    new uglifyJsPlugin(),
  ]
}

三、搭建本地服务器

npm安装
- 安装的时候要指定3.*的版本，否则会报错，运行npm run dev遇到的问题：Error: Cannot find module ‘webpack-cli/bin/config-yargs’，-D表示写入package.js中
1
npm install webpack-cli@3 -D

配置webpack.config.js

module.exports = {
    devServer:{
    contentBase:'./dist', //表示监听/dist目录
    inline:true//表示实时刷新
  }
}

package.json配置dev指令

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "build": "webpack",
  "dev": "webpack-dev-server --open"//--open 只运行后直接打开浏览器
},

配置分离操作

安装webpack-merge
1
npm install webpack-merge --save-dev

base.config.js

const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const uglifyJsPlugin = require('uglifyjs-webpack-plugin')
module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, '../dist'),//__dirname只当前目录的上一级目录
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [ 'style-loader', 'css-loader' ]
      },
      {
        test: /\.(png|jpg|gif|jpeg)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              limit:12000,
              name: 'img/[name].[hash:8].[ext]'
            }
          }
        ]
      },
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['es2015']
          }
        }
      },
      {
        test:/\.vue$/,
        use:['vue-loader']
      }
    ],

  },
  resolve:{
    alias:{
      'vue$':'vue/dist/vue.esm.js'
    }
  },
  plugins:[
    new webpack.BannerPlugin('最终版权归aaaa'),
    new HtmlWebpackPlugin({
      template:'index.html'
    })
  ],

}

dev.config.js

const webpackMerge = require('webpack-merge')
const baseConfig = require('./base.config.js')//注意这里需要加./
module.exports = webpackMerge.merge(baseConfig,{
  devServer:{
    contentBase:'./dist',
    inline:true
  }
})

prod.config.js

const uglifyJsPlugin = require('uglifyjs-webpack-plugin')
const webpackMerge = require('webpack-merge')
const baseConfig = require('./base.config.js')//注意这里需要加./
module.exports = webpackMerge.merge(baseConfig,{
  plugins:[
    new uglifyJsPlugin(),
  ],
})

修改package.json

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

原文作者：30no2

原文链接：http://mr-9.github.io/2021/05/26/vue.js笔记五/

发表日期：May 26th 2021, 12:00:00 am

更新日期：May 27th 2021, 10:19:46 am

Next Post

vue.js笔记六
Previous Post

vue.js笔记四

CATALOG

1. 一、Webpack详解
2. 二、plugin
3. 三、搭建本地服务器



缺失模块。
1、请确保node版本大于6.2
2、在博客根目录（注意不是archer根目录）执行以下命令：
npm i hexo-generator-json-content --save
3、在根目录_config.yml里添加配置：

jsonContent:
  meta: false
  pages: false
  posts:
    title: true
    date: true
    path: true
    text: false
    raw: false
    content: false
    slug: false
    updated: false
    comments: false
    link: false
    permalink: false
    excerpt: false
    categories: true
    tags: true