乐趣区

关于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 我的项目就搭建实现了。

退出移动版