使用前准备
- 使用webpack前需要先全局安装wepback和webpack-cli；执行代码：
npm install webpack webpack-cli -g
- 还需要进行初始化；之后会生产一个package.json，然后进行修改
初始化命令：npm init
pageage.json加入的内容："scripts": {
"build": "webpack --mode production"
},
"devDependencies": {
"webpack": "^4.1.1",
"webpack-cli": "^2.0.12",
}
- 然后进行安装依赖，执行npm install
- webpack会默认打包压缩./src/index.js;也就是说可以零配置构建；我们执行完npm run build之后会发现多了一个dist的文件夹，里面就是处理好的文件；
webpack的基本概念
- entry 入口，如果是单页面应用，那么可能入口只有一个；如果是多个页面的项目，那么经常是一个页面会对应一个构建入口；
- loader 转换器，负责把某种文件格式的内容转换成 webpack 可以支持打包的模块。可以这么理解，模块代码转换的工作由 loader 来处理，除此之外的其他任何工作都可以交由 plugin 来完成。
- plugin 插件，例如，要使用压缩 JS 代码的 uglifyjs-webpack-plugin 插件，只需在配置中通过 plugins 字段添加新的 plugin 即可
- output 输出，webpack最终构建成的配置文件
- webpack运行时会默认读取webpack.config.js;
搭建基本的前端开发环境
- html-webpack-plugin 可以将我们的页面和构建 JS 关联起来
- css-loader 负责解析 CSS 代码，style-loader 会将 css-loader 解析的结果转变成 JS 代码
3.img file-loader 可以用于处理很多类型的文件，如png，jpg，gif - 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 字段下
- 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'
}
- resolve.extensions
extensions: ['.wasm', '.mjs', '.js', '.json', '.jsx'],
这样尝试帮你补全那些后缀名来进行查找
// 这里的顺序代表匹配后缀的优先级，例如对于 index.js 和 index.jsx，会优先选择 index.js - resolve.modules
像平时直接可以 import vue from ‘vue’，import axios from ‘axios’
resolve: {
modules: [
path.resolve(__dirname, 'node_modules'), // 指定当前目录下的 node_modules 优先查找
'node_modules', // 如果有一些类库是放在一些奇怪的地方的，你可以添加自定义的路径或者目录
],
}
- 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
