配置前说明：确保已安装node环境。

检查是否安装node环境：

  1、终端输入node -v或node --version
  2、终端输入npm -v或npm --version

一、配置前命令简写说明：

1、`npm i` 和`npm install`区别：

a）npm i是npm install缩写。
b）用npm i安装的模块无法用npm uninstall删除，用npm uninstall i才卸载掉。
c）npm i会帮助检测与当前node版本最匹配的npm包版本号，并匹配出来相互依赖的npm包应该提升的版本号。
d）部分npm包在当前node版本下无法使用，必须使用建议版本。
e）安装报错时intall肯定会出现npm-debug.log 文件，npm i不一定。

2、`npm -D`和`npm -S`的区别：

a）-S就是--save的简写。
b）-D就是--save-dev 这样安装的包的名称及版本号就会存在package.json的devDependencies这个里面，而--save会将包的名称及版本号放在dependencies里面。

二、webpack基础配置（开发环境）：

命令运行前提：终端进入项目目录文件夹里，以下不再说明。
1、创建一个项目目录demo，使用NPM初始化配置：
npm init
执行后，会有一系列选项，可以按回车快速确认，完成后，会在demo目录生成一个package.json文件。
2、使用NPM安装webpack模块、webpack-dev-server模块和webpack-cli模块：
npm install webpack --save-dev
npm install webpack-dev-server --save-dev
npm i -D webpack-cli
安装成功后，在package.json中会多几项配置：

"devDependencies": {
    "webpack": "^4.29.6",
    "webpack-cli": "^3.2.3",
    "webpack-dev-server": "^3.2.1"
  }

3、在demo目录下创建webpack.config.js并初始化内容：

const config = {

};
module.exports = config;

4、在package.json的scripts里增加一个快速启动webpack-dev-server服务的脚本和打包脚本：

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

其中--config是指向webpack-dev-server读取的配置文件路径。
--open会执行命令时自动在浏览器打开页面，默认地址是127.0.0.1:8080。
IP和端口都是可以配置的，例如：

//...
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --host 172.172.172.1 --port 8888 --open --config=webpack.config.js"
  },
  //...

这样访问地址就改为了172.172.172.1:8888。
5、入口（Entry）和出口（Output）：

webpack配置中最重要也是必选的两项是入口（Entry）和出口（Output）。
入口的作用是告诉webpack从哪里开始寻找依赖，并且编译。
出口的作用是用来配置编译后的文件存储位置和文件名。

在demo目录下新建一个空的main.js作为入口的文件，然后在webpack.config.js中进行入口和出口的配置：

const path = require('path');

const config = {
  entry: {
    main: './main'
  },
  output: {
    path: path.join(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'main.js'
  }
};

entry中的main就是配置的单入口，webpack会从main.js文件开始工作。
output中path选项用来存放打包后文件的输出目录，是必填项。
publicPath指定资源文件引用的目录，如果你的资源存放在CDN上，这里可以填CDN的网址。
filename用于指定输出文件的名称。
因此，这里配置的output意为打包后的文件会存储为demo/dist/main.js，只要在html中引入即可。

在demo目录下新建一个index.html作为项目的入口：




    
    
    Demo

运行npm run build命令，后再执行npm run dev即可启动了一个空项目。
6、webpack加载器（Loaders）：
webpack通过安装不同的加载器（Loaders）可以对各种后缀名的文件进行处理。
css-loader和style-loader，通过NPM安装：
npm install css-loader --save-dev
npm install style-loader --save-dev
安装完成后，在webpack.config.js文件里配置Loader，增加对.css文件的处理：

const path = require('path');

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

在module对象的rules属性中可以指定一系列的loaders，每一个loader都必须包含test和use两个选项。这段配置的意思是说，当webpack编译过程中遇到require（）或import语句导入一个后缀名为.css的文件时，先将它通过css-loader转换，然后继续打包。
use选项的值可以是数组或字符串，如果是数组，它的编译顺序就是从后往前。

在demo目录下新建一个style.css的文件，作为全局css样式，并在main.js中导入：

//main.js
import './style.css';

7、webpack插件（Plugins）：
通过NPM安装extract-text-webpack-plugin插件：
npm install extract-text-webpack-plugin@next --save-dev
然后在webpack.config.js配置文件中导入插件，并改写loader的配置和index.html：

const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

const config = {
    //...
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    { loader: "style-loader" },
                    { loader: "css-loader" }
                ]
            }
        ]
    },
    plugins: [
        // 重命名提取后的css文件
        new ExtractTextPlugin('main.css')
    ]
};

module.exports = config;




    
    
    Demo
    

...

到此，基本的webpack配置就写完了。webpack虽然看似复杂，但它只不过是一个js配置文件，只要搞清楚入口（Entry）、出口（Output）、加载器（Loaders）和插件（Plugins）这四个概念，使用起来就不那么困惑了。

三、单文件组件和vue-loader：

一个.vue文件一般包含3部分，即

从零搭建webpack4 + vue + vue-rout + vuex项目架构