webpack配置文件

webpack的配置文件 (vue的2.x)

一. vue-cli的2.x 文件目录

• build.js

• config.js

• node-models ---- 包的依赖文件

• static ---- 存放静态资源

  • .babel.js (2.x) ---- 高级语法的配置文件 .babel.config.js (3.x)

  • .editorconfig ---- 编译器的配置文件

  • .gitigonore ---- 上传远程服务的剔除文件

  • .postcssrc (2.x) ---- 样式的插件配置文件 postcss.config.js (3.x)

  • index.html ---- 主要页面

  • package.json ---- 记录文件

  • src ---- 存放源码

    • assets 存放imgs, css, js...

    • compontents 存放普通的组件

    • pages 存放插件

    • plugins 存放第三方ui组件库

    • router 存放路由文件

    • views 存放常用组件

    • App.vue 根组件

    • main.js 入口文件

    • api 存放后台请求的接口

二. webpack的基本使用

1. 新建一个空项目

   1.1 初始化项目 npm init -y

2. 新建一个src文件夹

   2.1 新建index文件 touch index.js

3. 安装webpack

   npm i webpack webpack-cli -g

4. 安装webpack相关的包

   4.1 第3点第四点,任选一个 npm i webpack webpack-cli -D

• 注意：webpack 的 4.x 版本中默认约定：

  1. 打包的入口文件为 src -> index.js

  2. 打包的输出文件为 dist -> main.js

1. 创建webpack.config.js的配置文件

   module.exports = { mode: 'development' // mode 用来指定构建模式 }

2. 在package.json配置文件

   "scripts": { "build": "webpack" // script 节点下的脚本，}

3. 在终端中运行命令，启动 webpack 进行项目打包。

   npm run build yarn build

4. 配置打包的单入口与出口

• 注意: webpack 的 4.x 版本中默认约定：

  1. 打包的入口文件为 src -> index.js

  2. 打包的输出文件为 dist -> main.js

• 要修改打包的入口与出口，可以在 webpack. config.js 中新增如下配置信息：

  const path = require('path') // 导入 node.js 中专门操作路径的模块
  module.exports = {
  entry: path.join(__dirname, './src/index.js'), // 打包入口文件的路径
  output: {
  path: path.join(__dirname, './dist'), // 输出文件的存放路径
  filename: 'build.js' // 输出文件的名称
  } }

1. 配置打包的多入口与出口

• 注意:新增入口文件为 src -> home.js 修改输出文件为 filename: '[name].js'

• 在 webpack.config.js 中新增如下配置信息：

  const path = require('path') // 导入 node.js 中专门操作路径的模块
  module.exports = {
  entry: {
  index: path.join(__dirname, './src/index.js'), // 打包入口文件的路径
  home: path.join(__dirname, './src/home.js'), // 打包入口文件的路径
  }
  output: {
  path: path.join(__dirname, './dist'), // 输出文件的存放路径
  filename: '[name].js' // 输出文件的名称
  }
  }

1. 配置 html-webpack-plugin 生成预览页面

   npm install html-webpack-plugin –D

• 修改 webpack.config.js 文件头部区域，添加如下配置信息：

  // 导入生成预览页面的插件，得到一个构造函数
  const HtmlWebpackPlugin = require('html-webpack-plugin')
  const htmlPlugin = new HtmlWebpackPlugin({ // 创建插件的实例对象
  template: './src/index.html', // 指定要用到的模板文件
  filename: 'index.html' // 指定生成的文件的名称，该文件存在于内存中，在目录中不显示
  })

• 修改 webpack.config.js 文件中向外暴露的配置对象, 新增如下配置节点:

  module.exports = {
  plugins: [ htmlPlugin ] // plugins 数组是 webpack 打包期间会用到的一些插件列表 }

1. 配置 webpack 的自动打包功能

   npm install webpack-dev-server –D

• 修改 package.json -> scripts 中的 dev 命令如下:

  "scripts": {
  "dev": "webpack-dev-server" // script 节点下的脚本，可以通过 npm run 执行 }

• 在 dist下 新建 index.html ，并使用script 引入 "/build.js“

• 运行 npm run dev 命令，重新进行打包

• 在浏览器中访问 http://localhost:8080 地址，查看自动打包效果

• 注意: webpack-dev-server 会启动一个实时打包的 http 服务器 webpack-dev-server 打包生成的输出文件，默认放到了项目根目录中，而且是虚拟的、看不见的

1. 配置自动打包相关的参数

• package.json中的配置

  // --open 打包完成后自动打开浏览器页面
  // --host 配置 IP 地址 // --port 配置端口
  // --mode 配置打包方式 只有 production 生产 和 development 开发 两种环境
  "scripts": {
  "dev": "webpack-dev-server --open --host 127.0.0.1 --port 8888"
  },

webpack 加载器

1. 通过 loader 打包非 js 模块

• 在实际开发过程中，webpack 默认只能打包处理以 .js 后缀名结尾的模块，其他非 .js 后缀名结尾的模块，webpack 默认处理不了，需要调用 loader 加载器才可以正常打包，否则会报错！

• loader 加载器可以协助 webpack 打包处理特定的文件模块，比如：

  • less-loader 可以打包处理 .less 相关的文件

  • sass-loader 可以打包处理 .scss 相关的文件

  • url-loader 可以打包处理 css 中与 url 路径相关的文件

2.webpack 中加载器的基本使用

1. 打包处理 css 文件

   npm i style-loader css-loader -D

• 在 webpack.config.js 的 module -> rules 数组中，添加 loader 规则如下：

  // 所有第三方文件模块的匹配规则 module: {
  rules: [
  { test: /.css$/, use: ['style-loader', 'css-loader'] }
  ]
  }

• 其中，test 表示匹配的文件类型， use 表示对应要调用的 loader

• 注意： use 数组中指定的 loader 顺序是固定的 多个 loader 的调用顺序是：从后往前调用

1. 打包处理 less 文件

   npm i less-loader less -D

• 在 webpack.config.js 的 module -> rules 数组中，添加 loader 规则如下：

  // 所有第三方文件模块的匹配规则
  module: {
  rules: [
  { test: /.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }
  ]
  }

1. 打包处理 scss 文件

   npm i sass-loader node-sass -D

• 在 webpack.config.js 的 module -> rules 数组中，添加 loader 规则如下：

  // 所有第三方文件模块的匹配规则
  module: {
  rules: [
  { test: /.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }
  ]
  }

1. 把css样式打包到单独文件

   npm i mini-css-extract-plugin -D

• 在 webpack.config.js 的 plugins选项中添加以下插件:

  const MiniCssExtractPlugin = require('mini-css-extract-plugin')
  plugins: [
  new MiniCssExtractPlugin({
  filename: 'static/css/[name].[chunkhash:8].css', })
  ]

• 在webpack.config.js 的module中替换规则

  rules: [ { test: /.css$/, use: [MiniCssExtractPlugin.loader, 'css-loader'] } ]