webpack 配置注意的小技巧 和 坑

webpack 配置注意的小技巧 和 坑

// 相关版本信息
"webpack": "^4.44.1",
"webpack-cli": "^3.3.12"

css-loader 中的坑

1. 自 v1.0.0 开始废弃了 minimize option，因此无法由如下的写法 v1.0.0 break changes

// ... 省略其余配置内容
module:{
	rules:[
		// "css-loader?minimize",  error
		{ 
			test: /\.css$/, 
			use:[ 
				loader:'css-loader',
				options:{ minimize: true } // error
			]
		}
	]
}	

因为 minimize 已经被废弃了，所以不能这样使用了，如果需要对 css 代码进行压缩，需要使用别的 plugin ，比如 UglifyJsPlugin

2. 把 css 样式抽离成一个单独的文件，原先可以使用 extract-text-webpack-plugin ，但是自 webpack 升级到 v4 之后就不在支持对于 css 的抽离，需要使用另一 plugin mini-css-extract-plugin , 使用了 plugin 进行抽离后，我们可以把 style-loader 去掉，不然会重复打包，导致在 js 文件中也会有打包的 css。
   style-loader: 在打包生成的js文件中，动态创建

context 的小技巧

webpack-config/
├─── node_modules/
├─── src/
│   └─── main.css # CSS 
│   └─── main.js # entry 入口檔案
├─── index.html      
├─── webpack.config.js 
└─── package.json

如果目录结构如上面的样子的时候，在 webpack 中的 entry 需要如下这样配置

entry: './src/main.js'

Context 默认为执行启动 Webpack 时所在的当前工作目录。 如果想改变 context 的默认配置，则可以在配置文件里这样设置它：

module.exports = {
  context: path.resolve(__dirname, ‘src’),
	entry: '.main.js'
}

context 必须是一个绝对路径的字符串。 除此之外，还可以通过在启动 Webpack 时带上参数 webpack -—context 来设置 context,Entry 的路径和其依赖的模块的路径可能采用相对于 context 的路径来描述，context 会影响到这些相对路径所指向的真实文件。

Resolve

在 webpack 中配置 Resolve 的 extensions 时注意是 .js .ts 不要漏了那个 . 因为我们在使用的时候，常常会省略导入文件的后缀名，这里这样配置后就可以按配置的顺序取查找对应文件了

resolve: {
    extensions: [".ts", ".js"],
    alias: {
        "@": "./components",
    },
},
// usage
import show from './show'

上面这么配置，表示会首先从 show.ts 取找，如果找到了这个文件就直接跳过后面的，如果没找到 show.ts 就会去找 show.js ，都没找到就会报错，因此这里我们在导入文件的时候最好可以加上文件后缀，这样可以提高 webpack 的打包速度。
上面的 alias 是为了在导入文件的时候图个方便，以及写法的简洁，有时候我们会看到如下这样的导入,这样看起来就很不优雅，因此我们可以通过 alias 的方式来优化我们的导入，alias 配置项通过别名来把原导入路径映射成一个新的导入路径，最后 webpack 会在找文件的时候把 @ 替换成对应的 ./componnts

import xxx from '../../../xxx'

配置 React

1. 创建一个 react 文件 （即：使用了 react 语法的 js 文件）
2. 安装 babel-loader @babel/core @babel/preset-env @babel/preset-react （一般也会让你安装 @babel/preset-env 这个，这个可以让你使用最新的 js 语法，[@babel/preset-env](https://babeljs.io/docs/en/babel-preset-env)，但是其实你不配置这个其实也不影响）
3. 增加 `.babelrc` 文件,只要下面这一句话就行了

{
    "presets": ["@babel/preset-env", "@babel/preset-react"]
}

4. 修改 `webpack.config.js` 文件，增加 babel-loader

{
	test:/\.js$/,
	use:["babel-loader"]
}

只要上面四步就完成了对 react 的打包配置，如果你是 jsx 的，需要配置一下 resolve.extensions

TypeScript 和 react

1. 承接上面的，* 由于 React 不是采用 TypeScript 编写的，需要安装 react 和 react-dom 对应的 TypeScript 接口描述模块 @types/react 和 @types/react-dom 后才能通过编译。
2. 把上面创建的 react 文件后缀改为 tsx，这时候会发现文件中有些报错，看下一步
3. 修改 tsconfig 文件（webpack 中配置 ts 的这里不多说，默认已经配置了 ts 的 loader）,修改为如下这样后上面的报错基本上没了

"jsx": "react"

4. 修改webpack，原先 `/\.ts$/` 可以修改一下 `//\.tsx?$` 这样就能匹配到 tsx 文件了，同时在 resolve.extensions 中增加 `.tsx` 的后缀

React 中使用 typescript 加上上面的 4 步，其实合并下来也就 5、6 步的样子，配置简单。

在使用了 TS 的 react 中导入图片

import image from './1.png

我们在普通的 js 文件中这样写是没有问题的，但是当我们在 ts 文件中这么写就会抛出一个错误

TS2307: Cannot find module './1.png' or its corresponding type declarations.

解决方法就是在声明文件中声明各类图片的格式

declare module '*.svg'
declare module '*.png'
declare module '*.jpg'
declare module '*.jpeg'
declare module '*.gif'
declare module '*.bmp'
declare module '*.tiff'

注意：这样ts就可以识别svg、png、jpg等等图片类型文件。项目编译过程中会自动去读取 .d.ts 这种类型的文件，所以不需要我们手动地加载他们。当然.d.ts文件也不能随便放置在项目中，这类文件和ts文件一样需要被typescript编译，所以一样只能放置在tsconfig.json中include属性所配置的文件夹下。