webpack: 配置一个vue的webpack环境

第一步：
npm init

npm install webpack vue vue-loader css-loader vue-template-compiler

第二步： 创建文件：
src–>app.vue，代码如下：

<template>
  <div class="test">
    test
  </div>
</template>

<script> export default { } </script>

<style scoped> .test { color: red; } </style>

然后在webpack.config.js里面定义出口和入口：

module.exports = {
  entry: __dirname + '/src/index.js',
  output: {
    path: __dirname + '/dist/js',
    filename: 'bundle.js'
  }
}

然后编写index.js入口文件。

import Vue from 'vue';
import App from './app.vue';


const root = document.createElement('div');
// 把root插入到body里面
document.body.appendChild(root);

new Vue({
  render: (h) => h(App)
  // 通过app把他挂在到html里面
}).$mount(root)
// mountApt 到root节点上面 把appvue里面的内容插入到root里面

然后在config.js里面定义build：调用内部的webpack。

"build": "webpack --config webpack.config.js"

这时候输入 npm run build 的时候回报错：

One CLI for webpack must be installed. These are recommended choices, delivered as separate packages:
 - webpack-cli (https://github.com/webpack/webpack-cli)
   The original webpack full-featured CLI.
 - webpack-command (https://github.com/webpack-contrib/webpack-command)
   A lightweight, opinionated webpack CLI.
We will use "npm" to install the CLI via "npm install -D".
Which one do you like to install (webpack-cli/webpack-command):

这是因为webpack4需要依赖webpack-cli.

npm i webpack-cli

这时候任然报错：

You may need an appropriate loader to handle this file type.
> <template>
|   <div class="test">
|     test
 @ ./src/index.js 2:0-28 10:19-22

缺少style-loader.

npm i style-loader

然后在webpack.config.js里面进行配置：

const VueLoaderPlugin = require('vue-loader/lib/plugin')
module: {
    rules: [
      {
        test: /.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.css$/,
        use:[
          'style-loader',
          'css-loader',
        ]
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin()
  ]

这时候run build 就不会报错了。

第二步： 使用webpack加载各种静态资源

{ test: /\.(png|jpg|jpeg|svg|gif)/, use:[ { loader:'url-loader', options: { limit: 1024, // 如果小于1024kb，就编译成base64 name: '[name].[ext]' }
          }
        ]
      },
      { test: /\.styl$/, use: [ 'css-loader', 'style-loader', 'stylus-loader' ] }

npm install url-loader stylus-loader

第三步：
配置devserver：

npm install webpack-dev-server

然后在webpack.config.js里面配置全局的target：

target：'web'

在pack.json里面配置：

"dev": "webpack-dev-server --config webpack.config.js"

这个时候，端口就可以打开了。

然后判断是正式上线的环境还是开发环境：

npm i cross-env

然后分别在webpack.config.js和pack.json里面这样处理：

"build": "cross-env NODE_ENV=production webpack --config webpack.config.js",
    "dev": "cross-env NODE_ENV=deveolpment webpack-dev-server --config webpack.config.js"

const isDev = process.env.NODE_ENV === 'development'

if (isDev) {
    config.devServer = {
      port: 8000,
      host: '0, 0, 0, 0',
      overlay: {
        errors:true
      }
    }
}

然后增加html的容器。让整个页面在浏览器可以显示：

npm i html-webpack-plugin

const HTMLPlugin = require('html-webpack-plugin')
const webpack = require('webpack')

然后在plugin中配置如下：

plugins: [
    new VueLoaderPlugin(),
    new HTMLPlugin(),
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: isDev ? '"development"' : '"production"'
      }
    })
  ]

到这里就基本完成了。
接下来做一点优化：让页面不刷新就可以热更新

config.plugins.push(
      new webpack.HotModuleReplacementPlugin(),
      new webpack.noEmitOnErrorsPlugin()
    )

config.devtool = '#check-module-eval-source-map',

大功告成啦。