关于webpack:手动快速搭建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我的项目就搭建实现了。