webpack打包vue

1下载

npm init -y
npm install webpack --save
npm install -D webpack-cli 

2创建webpack.config.js 文件

创建dist文件夹和src文件夹

• entry 入口文件地址
• output 出口文件地址

const path = require('path');

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

webpack官网地址

3下载打包.vue文件相关配置

vue-loader

npm install -D vue-loader vue-template-compiler

// webpack.config.js
const { VueLoaderPlugin } = require('vue-loader')

module.exports = {
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin()
  ]
}

css-loader

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

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
};

url-loader

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

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192,
            },
          },
        ],
      },
    ],
  },
};

打包.vue文件

下载vue包

npm install vue --save-dev

在src下创建components文件夹，并创建app.vue

<template>
  <div>
    <h2>{{mes}}</h2>
    <button @click='cli'>按钮</button>
  </div>
</template>

<script>
export default {
  data(){
    return {
      mes: '组件'
    }
  } ,
  methods: {
    cli() {
      console.log(1);
    }
  }
}
</script>

<style>
button{
  width: 100px;
}
</style>

在main.js中引入vue包，引入app.vue

项目根目录创建main.js

import Vue from 'vue'

import App from './src/components/app.vue'

new Vue({
  render: h => h(App)
}).$mount('#app')

package.json中添加

"build": "webpack"

执行npm run build

插件plugin

html-webpack-plugin

在dist目录下生成index.html

npm install html-webpack-plugin --save-dev
npm install -D babel-loader @babel/core @babel/preset-env webpack

const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装
const webpack = require('webpack'); // 访问内置的插件

module.exports = {
	module: {
	    rules: [
	      {
	        test: /\.(js|jsx)$/,
	        use: 'babel-loader',
	      },
	    ],
	  },
	  plugins: [
	    new webpack.ProgressPlugin(),
	    new HtmlWebpackPlugin({ template: './index.html' }),
	  ],
};

代码压缩

module.exports = {
  mode: 'development',
};

webpack-dev-server

webpack-cli 和 webpack-dev-server 有兼容问题

npm i webpack-dev-server@3.11.0 -D
npm i webpack-cli@3.3.12 -D