手动快速搭建webpack

vue-cli2中主要是用到webpack的两个核心功能是模块化、打包。比如在每个js文件中，同时定义一个变量 var x = "hello"，在调用文件中修改这个变量，两个文件的变量x都被改变了，造成了全局污染，这只是一个简单的例子；其实模块化，我们自己不用webpack也是可以解决的，比如每个js文件用自执行函数来包起来，形成一个独立的作用域。但是这样很麻烦、也不好维护和扩展；以下手动搭建webpack基础项目的步骤：（如有错误，评论区留言纠正，摘于自己的笔记，可能比较糙）

1、首先，webpack是依赖于node，所以必须要安装node, node里包含npm，当然也可以yarn，其实现在yarn和npm的性能差不多;

输入指令 node -v 检查是否安装node,

2、全局安装webpack, 输入指令进行全局安装 npm i -g webpack@3.6.0 ,只要是终端输入命令就是调用全局的webpack (vue-cli2就是用webpack@3.6.0), 同样通过指令 webpcak -v查看安装版本。安装完成后，就可以进行打包了，通过指令：

webpack ./src/main.js(打包文件)  ./dist/bundle.js(输出文件)。
// .main.js是需要打包文件  bundle.js是输出文件
webpack在打包的时候，会在main.js文件中，找到文件中引入的依赖，没有调用的依赖，不进行打包。

3、其实可以通过创建webpack.config.js文件，来指定需要打包的文件和输出的文件；

  const path = require("path");
  module.exports = {
    // entry: "./main.js", //入口
    entry: {
      app: "./main.js" //这样配置就打包成app.js
    }
    output: { //输出
      filename: "bundle.js",
      path: path.resolve(__dirname, "./dist") //绝对路径
    }
  }

4、步骤3用到path, 所以需要执行命令 npm init 进行初始化, 并且会多产生一个package.json文件和node_modules文件夹，先不管，后面会用到它；

5、在进行安装loader或者plugin之前, 需要安装在本地安装一下webpack,命令： npm i -D webpack@3.6.0

 原因->  1、如果这个时候需要通过webpack来进行打包的话，完成1234步骤后，按理只需要输入webpack进行打包就可以，但是在终端输入的指令都是调用全局安装的webpack;
        2、可能本地webpack和全局的版本不一样，如果本地插件版本是依赖webpack@3.6.0, 而全局webpack的版本是@4.1.0 的话,到时候打包可能就存在loader和plugin版本不兼容的问题；

6、接下来就是安装loader, 用来加载和解析各种格式的文件，安装loader有两个步骤：

  -> npm i -D xxx-loader
  -> 配置webpack.config.js文件

    例如:
    首先 npm 安装less的loader，输入指令 npm install less less-loader --save-dev，或者指令版本的 npm install less@3.9.0 less-loader@4.1.0 --save-dev 
    然后配置webpack.config.js文件： 
    module.export = {
      module: {
        rules: [
          test: /\.less$/i,
          use: ["style-loader", "css-loader", "less-loader"] //数组的执行顺序是从右往左依次执行的
        ]
      }
    }
这里推荐一些基本的loader
style-loader 将模块导出的内容作为样式并添加到 DOM 中；
css-loader 加载 CSS 文件并解析 import 的 CSS 文件，最终返回 CSS 代码；
less-loader 加载并编译 LESS 文件(相似的有 sass-loader 加载并编译 SASS/SCSS 文件)；
babel-loader 使用 Babel 加载 ES2015+ 代码并将其转换为 ES5
file-loader file-loader 将文件发送到输出目录;一般用来加载小图片，通常设置为8-10k,在设置的范围内的，图片会转换成base64格式进行加载
url-loader  将文件作为 data URI 内联到 bundle 中;图片过大的化，就可以用url-loader来加载，像视频|音频|字体都可以加载；
vue-loader vue-template-compiler 分别用来vue文件的加载和vue的模板编译

7、在package.json里面配置scripts配置，并指定编译文件；

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config ./build/webpack.prod.config.js",
    "dev": "webpack-dev-server --progress --open --config ./build/webpack.dev.config.js" //--progress 编译进度条，也可以写在配置文件里面 --open是自动打开浏览器
  },

其中build项配置，跟以下同理
const webpack = require("webpack");
const config = require("./build/webpack.prod.config.js");

webpack(config, (err, stats) => {
  //里面可以写一些打包异常的捕获
})

然后通过node  xxx.js来执行这个文件，性质是一样的，vue-cli2就是这么做的；以上步骤处理完之后，就是通过npm run dev运行和通过npm run build进行编译；

使用 webpack-dev-server跟loader的两个步骤一样

1、npm install --save-dev webpack-dev-server
2、添加devServer属性配置：
  const path = require('path');
  module.exports = {
    mode: 'development',
    entry: {
      app: './src/index.js',
    },
    devServer: {
      contentBase: './dist',
      inline: true,
      compress: true,
      port: 9000,
      open: true,
    },
    output: {
      filename: '[name].bundle.js',
      path: path.resolve(__dirname, 'dist')
    },
  };

8、抽离 开发配置和打包配置，分别抽离步骤7用的两个文件，webpack.prod.config.js和webpack.dev.config.js，以及公共配置文件webpack.base.config.js；

配置文件格式有两种格式 ，一般是对象，如果亚勇env变量就需要转换成一个函数的形式，如下：
const path = require("path"); //node包里面的，通过指令 npm init初始化
module.exports = (env) => {
  console.log('Goal: ', env.goal); // 'local'
  console.log('Production: ', env.production); // true

  return {
    entry: './src/index.js',
    output: {
      filename: 'bundle.js',
      path: path.resolve(__dirname, 'dist'),
    },
  };
};

以上步骤完成后，基本的webpack项目就搭建完成了。