vue webpack配置（建议使用Vue Cli，不要自己配置

--强烈建议使用Vue Cli，不要自己配置没必要--

---

安装webpack
webpack依赖于node环境，安装完node之后也自然有包管理工具npm了；
进入node项目中初始化node项目 npm init => 创建package.json文件；
package.json文件用于管理node项目中npm安装的包。
全局安装npm i webpack –g
安装webpack或less最好不要全局安装，否则可能导致 webpack的版本差异。

1、初始化项目npm init

输入npm init，会提示你填写一些项目的信息，一直回车默认就好了，或者直接执行npm init -y 直接跳过，这样就在项目目录下生成了一个package.json文件

2、新建webpack配置文件夹。

myProject
  src
    - entry
        - index.js
    - pages
        - components
        - css
        - img
        - js
        - App.vue
        - index.html
        - main.js
    - public
+ - .babelrc
+ - webpack.config.js

• 新建的 webpack.config.js 是作为Webpack 的配置文件。
• 创建一个 .babelrc 文件,并写配置内容，webpack会依赖配置文件用babel编译es6代码：

{
  "presets": ["@babel/preset-env"]
}

3、编写webpack配置，安装依赖项

npm install webpack webpack-dev-server  css-loader file-loader url-loader html-webpack-plugin less less-loader sass-loader jsx-loader babel-loader @babel/core @babel/preset-env vue-loader vue-style-loader vue-template-compiler --save-dev

• babel：为了使项目兼容更多浏览器，需要用 Babel 对代码进行转换
  babel-loader @babel/core @babel/preset-env
• file-loader url-loader css-loader style-loader less less-loader 解析样式 、图片以及路径
• vue-loader vue-style-loader vue-template-compiler分别是处理.vue文件、处理.vue里面的样式、编译.vue中template里面的内容
• html-webpack-plugin个插件可以帮助生成 HTML 文件，在 body 元素中，使用 script 来包含所有你的 webpack bundles，只需要在你的 webpack 配置文件中如下配置：

var HtmlWebpackPlugin = require('html-webpack-plugin')
var webpackConfig = {
  entry: 'index.js',
  output: {
    path: 'dist',
    filename: 'index_bundle.js'
  },
  plugins: [new HtmlWebpackPlugin()]
}

npm install webpack --save-dev下载webpcak
webpack-dev-server 热更新
在 package.json 文件对应的 scripts 处写入命令:

{
   "scripts": {
      "build": "webpack",
      "dev": "webpack-dev-server"
    },
}

• 执行 npm run dev 即可启动本地服务，访问 localhost:8080 即可，8080 是默认的端口号，修改端口号配置如下
  webpack.config.js

module.exports = {
  // ...
  devServer: {
    compress: true,
    port: 8080
  }
}

npm run dev 开发环境
npm run build 生产环境

4、安装vue

npm install vue vue-router axios --save

5、webpack.config.js项目配置

// 导入路径模块, 专门处理路径，以当前的路径解析出一个绝对路径
let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');
let VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {
    // 打包的入口文件，webpack会自动查找相关的依赖进行打包
    entry: './src/pages/main.js',
    // 出口
    output: {
        // 打包后的文件名
        filename: "bundle.js",
        // 打包后的路径
        path: path.resolve(__dirname, "dist")
    },
    module: {   //它告知 webpack每一种文件都需要使用什么加载器来处理
        rules: [
            //.css 文件使用 style-loader 和 css-loader 来处理.
            { test: /\.css$/, loader: 'style-loader!css-loader' },
            //.less 文件使用 style-loader、css-loader 和 less-loader 来编译处理
            { test: /\.less$/, loader: 'style-loader!css-loader!less-loader'},
            //.js 文件使用babel-loader来编译处理,设置exclude用来排除node_modules这个文件夹中的代码
            { test: /\.js$/, loader: 'babel-loader',exclude: /node_modules/ },
            //.jsx 文件使用 jsx-loader 来编译处理
            { test: /\.jsx$/, loader: "jsx-loader?harmony" },
            //图片文件使用 url-loader 来处理，小于8kb的直接转为base64
            { test: /\.(png|jpg|jpeg|gif)$/, loader: 'url-loader?limit=8192'},
            { test: /\.(eot|ttf|svg|woff|woff2)$/, loader: 'url-loader?limit=8192'},
            //.vue 文件使用 vue-loader 来编译处理
            { test: /\.vue$/, loader: "vue-loader" }
        ]
    },
    plugins: [
        new VueLoaderPlugin(),  // 请确保引入这个插件！
        new HtmlWebpackPlugin({ //自动插入到dist目录中
            template: "./src/pages/index.html", //使用的模板
        })
    ]
};

======================================================
------------------------------------------分割线-------------------------------------------
======================================================

.vue文件模板

<template>
    <div>
        {{msg}}
    </div>
</template>
<script>
    export default {
        data(){
            return {
                msg:'hello'
            }
        },
        created(){

        },
        methods:{ },
        computed: { },
        components: { }
    }
</script>
<style scoped>

</style>