webpack 4.x 的使用

webpack 4.x 使用入门

• 运行 npm init -y 快速初始化项目
• 在项目根目录创建 src 源代码目录和 dist 产品目录
• 在 src 目录下创建 index.html 和 index.js
• 安装 webpack

npm i webpack -D
npm i webpack-cli -D    // 注意：webpack 4.x 将 webpack-cli 分离出来了，要单独安装

• 配置 webpack
  • 创建一个 webpack.config.js 的文件，配置如下
    • development 模式下输出的文件没压缩
    • production 模式下输出的文件进行了压缩

module.exports = {
  mode: 'development',  //这里有两种模式供选择   development 和 production
  // 在 webpack 4.x 中，有一个很大的特性，就是约定大于配置， 约定 默认的打包入口路径是 src -> index.js, 默认输出文件为 dist -> main.js
}

• 运行 webpack ，你会发现 dist 文件夹 多了个 main.js
• 然后 将 main.js 导入 index.html, 就能实现 js 文件的调用了

webpack 4.x 使用升级版

webpack-dev-server

• 用于实时打包文件并更新，但是，webpack-dev-server 打包好的 main.js 是托管到了内存中，所以在项目根目录中看不到
• 后面要想把文件打包到 dist 文件夹，还是要执行 webpack 命令
• 安装 webpack-dev-server

npm i webpack-dev-server -D

• 在 package.json 添加下面的 dev，对 webpack-dev-server 进行配置

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --open --port 5000 --hot --host 192.168.1.102"
  },

--open 执行 npm run dev后自动打开默认浏览器
--port 3000 指定端口号，默认是8080
--hot 完成自动刷新
--host 192.168.1.102

html-webpack-plugin

• 用于把 index.html 生成到内存中去
• 安装 html-webpack-plugin

npm i html-webpack-plugin -D 

• 由于会用到 path 模块，所以，先安装一下 path

npm i hpath -D 

• 在 webpack.config.js 里面配置 html-webpack-plugin

const path = require("path");
 // 导入在内存中自动生成 index.html 页面的插件
const htmlWebpackPlugin = require('html-webpack-plugin'); 

module.exports = {
  ... , // 这里是其他属性，先省略
  plugins: [ // 所有 webpack 插件的配置节点
    new htmlWebpackPlugin({
      template: path.join(__dirname, './src/index.html'), // 指定模板文件路径
      filename: 'index.html'  // 设置生成的内存页面的名称
      });
  ]
}

现在不用再 index.html 文件手动导入 index.js 文件，直接 运行 npm run dev 网页打开后查看源码，会发现在最后面自动导入了 js 文件

babel

• 它的作用是对js代码进行转译，将一些 ES6 和 其他一些 js 文件中浏览器不识别的代码转换成浏览器识别的代码
• 需要安装的一些模块如下(这里的 react 是使用 react 要用到的包)
• 注意：这里是的 babel-loader 7.x 的用法，8.x 请参考官网https://www.npmjs.com/package/babel-loader

npm i babel-core babel-loader@7 babel-plugin-transform-runtime -D
npm i babel-preset-env babel-preset-stage-0 babel-preset-react -D

• 还需单独创建一个 .babelrc 文件进行 babel 配置

{
  "presets": [
    "env",
    "stage-0",
    "react"
  ],
  "plugins": [
    "transform-runtime"
  ]
}

下面是打包一些其他类型文件要用到的第三方 loader

• 配置前要先安装需要使用到的相关 loader
• 配置如下

// 由于 webpack 是基于 Node 进行构建的，所以，webpack 的配置文件中，任何合法的 Node 代码都是支持的
const path = require('path');
// 在内存中，根据指定的模板页面，生成一份内存中的首页，同时自动把打包好的 bundle 注入到页面底部
// 如果要配置插件，需要在导出的对象中，挂载一个 plugins 节点
const htmlWebpackPlugin = require('html-webpack-plugin');

const vueLoaderPlugin = require('vue-loader/lib/plugin');

// 当以命令行形式运行 webpack 或 webpack-dev-server 的时候，工具会发现，我们并没有提供要打包的文件的入口和出口文件，此时，它会检查项目根目录中的配置文件，并读取这个文件，就拿到了导出的这个 配置对象，然后根据这个对象进行打包构建
module.exports = {
  mode: 'development',  //这里有两种模式供选择   development 和 production
  // 在 webpack 4.x 中，有一个很大的特性，就是约定大于配置， 约定 默认的打包入口路径是 src -> index.js, 默认输出文件为 dist -> main.js
  entry: path.join(__dirname, './src/main.js'), // 入口文件
  output: { // 指定输出选项
    path: path.join(__dirname, './dist'),  // 输出路径
    filename: 'bundle.js' // 指定输出文件的名称
  },
  plugins: [ // 所有 webpack 插件的配置节点
    new htmlWebpackPlugin({
      template: path.join(__dirname, './src/index.html'), // 指定模板文件路径
      filename: 'index.html'  // 设置生成的内存页面的名称
    }),
    new vueLoaderPlugin()  // 此实例是配置 vue-loader 所需
  ],
  module: { // 配置所有第三方 loader 模块的
    rules: [ // 第三方模块的匹配规则
      { test: /\.css$/, use: ['style-loader', 'css-loader'] },
      { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
      { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }, // 处理scss 的配置
      { test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader?limit=34270&name=[hash:8]-[name].[ext]' }, // 处理图片 url 的配置
      // limit 给定的值是图片的大小，单位是 byte，如果我们引用的图片 大于 给定的 limit 值，则不会被转为 base64 格式的字符串，如果图片 小于或等于 给定的 limit 的值，则会被转为 base64 的字符串
      { test: /\.(ttf|eot|svg|woff|woff2)$/, use: 'url-loader' }, // 处理字体文件的 loader
      { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ },  // 配置 babel 来转换高级的 ES 语法
      { test: /\.vue$/, use: 'vue-loader' }  // 处理 .vue 文件的第三方 loader
    ]
  }
};