webpack4手动搭建vue项目

看了慕课网的 vue+webpack打造todo 的教程，要手动搭建一下vue的项目。教程的webpack版本是3.0的，在学习的时候遇到了一个问题。

1. 创建目录，进去就不用说了：

mkdir vue-ssr-teach
cd vue-ssr-teach

2. 初始化npm 项目, 这一步执行完会出现一个package.json的文件

npm init

3. 安装依赖， 需要安装的总共有： webpack vue vue-loader css-loader vue-template-compiler, 后续有可能会提示你安装webpack-cli

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

4. 新建文件夹，创建src/App.vue,src/index.js

• src/App.vue 代码：

这里的代码很普通了，就是一个普通的Vue文件代码，不用解释
5. 新建webpack.config.js

• webpack.config.js代码：

const path = require('path')
// 加入 VueLoaderPlugin
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
    entry: path.join(__dirname, 'src/index.js'),
    output: {
        filename: 'bundle.js',
        path: path.join(__dirname, 'dist')
    },
    module: {
        rules: [
          {
            test: /\.vue$/,
            loader: 'vue-loader'
          },{
              test: /\.css$/,
              loader: 'css-loader'
          }
        ]
    },
    plugins: [
        new VueLoaderPlugin()
    ]
}

这里特别注意：

. 参考官方文档 https://vue-loader.vuejs.org/migrating.html#a-plugin-is-now-required
. Vue-loader在15.*之后的版本都是 vue-loader的使用都是需要伴生 VueLoaderPlugin的,

如果不引入 VueLoaderPlugin 就会编译失败
6. 在package.js > script下添加代码如下：

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

因为只有在这里配置了，才能运行内部的webpack
7. 在命令提示符下运行命令： 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.
We will use "npm" to install the CLI via "npm install -D".
Do you want to install 'webpack-cli' (yes/no):

输入y后则会自动安装，或者手动执行npm i webpack-cli 也行
安装好有可能会报下面的错误:

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/

这是一条很 黄 的提示, 意思就是说你要指定生产环境还是开发环境。
详情参考官网: https://webpack.js.org/concepts/mode/
修改package.json > script > build

"build": "webpack --mode=production --config webpack.config.js"

然后再执行 npm run build 就可以了，
你会发现项目里多了个 dist的文件夹

---

关注前端撸客公众号