webpack4入门讲解

使用前准备

1. 使用webpack前需要先全局安装wepback和webpack-cli；执行代码：

npm install webpack webpack-cli -g

2. 还需要进行初始化；之后会生产一个package.json，然后进行修改

 初始化命令：npm init 

pageage.json加入的内容："scripts": {
    "build": "webpack --mode production"
  },
  "devDependencies": {
    "webpack": "^4.1.1",
    "webpack-cli": "^2.0.12",
  }

3. 然后进行安装依赖，执行npm install
4. webpack会默认打包压缩./src/index.js;也就是说可以零配置构建；我们执行完npm run build之后会发现多了一个dist的文件夹，里面就是处理好的文件；

webpack的基本概念

1. entry 入口，如果是单页面应用，那么可能入口只有一个；如果是多个页面的项目，那么经常是一个页面会对应一个构建入口；
2. loader 转换器，负责把某种文件格式的内容转换成 webpack 可以支持打包的模块。可以这么理解，模块代码转换的工作由 loader 来处理，除此之外的其他任何工作都可以交由 plugin 来完成。
3. plugin 插件，例如，要使用压缩 JS 代码的 uglifyjs-webpack-plugin 插件，只需在配置中通过 plugins 字段添加新的 plugin 即可
4. output 输出，webpack最终构建成的配置文件

• webpack运行时会默认读取webpack.config.js;

搭建基本的前端开发环境

1. html-webpack-plugin 可以将我们的页面和构建 JS 关联起来
2. css-loader 负责解析 CSS 代码，style-loader 会将 css-loader 解析的结果转变成 JS 代码
   3.img file-loader 可以用于处理很多类型的文件，如png，jpg，gif
3. babel， JS 编译工具，以便使用 ES6、ES7 标准来编写 JS 代码

• 安装webpack-dev-sever，pageage.json里面添加

"scripts": {
  "build": "webpack --mode production",
  "start": "webpack-dev-server --mode development"
}

然后运行npm run dev来开启服务；

webpack的代码模块路径

• 和模块路径解析相关的配置都在 resolve 字段下

1. resolve.alias
   假设我们有个 utils 模块极其常用，经常编写相对路径很麻烦，希望可以直接 import 'utils' 来引用

模糊匹配
alias: {
  utils: path.resolve(__dirname, 'src/utils') // 这里使用 path.resolve 和 __dirname 来获取绝对路径
}
携带了 utils 就可以被替换掉，如import 'utils/query.js' 

精确匹配
alias: {
  utils$: path.resolve(__dirname, 'src/utils') // 只会匹配 import 'utils'
}

2. resolve.extensions
   extensions: ['.wasm', '.mjs', '.js', '.json', '.jsx'],
   这样尝试帮你补全那些后缀名来进行查找
   // 这里的顺序代表匹配后缀的优先级，例如对于 index.js 和 index.jsx，会优先选择 index.js
3. resolve.modules
   像平时直接可以 import vue from ‘vue’，import axios from ‘axios’

resolve: {
  modules: [
    path.resolve(__dirname, 'node_modules'), // 指定当前目录下的 node_modules 优先查找
    'node_modules', // 如果有一些类库是放在一些奇怪的地方的，你可以添加自定义的路径或者目录
  ],
}

4. resolve.mainFields
   入口声明，一般在pageage.json中的main，但也可以通过mainFields进行调整；可以根据是浏览器或者是服务器来判断入口；

resolve: {
  // 配置 target === "web" 或者 target === "webworker" 时 mainFields 默认值是：
  mainFields: ['browser', 'module', 'main'],

  // target 的值为其他时，mainFields 默认值为：
  mainFields: ["module", "main"],
}

5.resolve.mainFiles
个人觉得跟上面的mainFields差不多，相当于配置pageage.json中的main