Webpack
scarcoco opened this issue · comments
Webpack 知识点记录
TypeScript 配置 Webpack
https://webpack.js.org/configuration/configuration-languages/
使用函数形式的 Webpack 配置
大概格式如下:
export default (env, args) => {
return {}
}
- 通过
--env
方式传入参数都可以通过env
获取,具体参考:https://webpack.js.org/api/cli/#environment-options - 其他
--args
格式参数可通过args
获取;
npm script
设置环境变量
// Window
set NODE_ENV=production
"scripts": {
"release": "set NODE_ENV=production && webpack",
"dev": "set NODE_ENV=development && webpack"
}
// Linux & Mac
export NODE_ENV=production
"scripts": {
"release": "NODE_ENV=production webpack",
"dev": "NODE_ENV=development webpack"
}
// 跨平台方式
npm i cross-env -D
"scripts": {
"release": "cross-env NODE_ENV=production webpack",
"dev": "cross-env NODE_ENV=development webpack"
}
package.json
变量
$npm_package_[name]
方式获取 package.json
中的字段名字;
$npm_package_config_[name]
方式获取 package.json
中 config
字段下变量;
Window 下使用 %npm_package_[name]%
方式。
"name": "xxx",
"scripts": {
"release": "cross-env NODE_ENV=production webpack $npm_package_name",
"dev": "cross-env NODE_ENV=development webpack $npm_package_config_a"
},
"config": {
"a": "a"
}
代码中可以通过 process.env.npm_package_[name]
和 process.env.npm_package_config_[name]
方式获取变量,包括其他字段,比如:
npm_package_devDependencies_typescript ^3.8.2
npm_package_devDependencies_jest ^25.1.0
npm_package_scripts_eslint eslint
npm_package_devDependencies_clean_webpack_plugin ^3.0.0
npm_package_dependencies_react_dom ^16.13.0
npm_package_readmeFilename README.md
npm_package_description TypeScript react starter project
npm_package_devDependencies_webpack ^4.41.6
npm_package_license ISC
...
TypeScript
配置 Webpack
Webpack
使用 ts-node
来执行配置,ts-node
会自动加载 tsconfig.json
文件,但是会忽略include
、exclude
、files
配置,解决方法:
方法一
compilerOptions.typeRoots
增加声明文件;
方法二
设置 cross-env TS_NODE_FILES=true
环境变量(cross-env
);
很多时候,引用的第三方库可能没有定义文件,此时直接在项目中引入,则会报错,解决方法则自定义声明文件,然后包含到项目中,比如模块 postcss-safe-parser
、资源文件、样式文件等:
declare module 'postcss-safe-parser';
declare module '*.svg';
declare module '*.png';
declare module '*.jpg';
declare module '*.jpeg';
declare module '*.gif';
declare module '*.webp';
declare module '*.bmp';
declare module '*.less' {
const content: any
export default content
}
declare module '*.css' {
const content: any
export default content
}
另外一个问题 Webpack
打包找不到 tsconfig.json
中自定义的路径,可以考虑 tsconfig-paths-webpack-plugin
插件,需要配置 resolve.plugins
,按照官网的方法,指定 TS_NODE_PROJECT
环境变量无法运行,反而需要删除该环境变量。
resolve: {
extensions: CONSTANT.EXTENSIONS,
plugins: [
// https://github.com/dividab/tsconfig-paths-webpack-plugin/issues/32
// delete process.env.TS_NODE_PROJECT
new TsconfigPathsPlugin({
baseUrl: CONSTANT.APP_ROOT,
configFile: CONSTANT.TSCONFIG_PATH,
extensions: CONSTANT.EXTENSIONS
})
]
}
https://github.com/TypeStrong/ts-node
https://github.com/dividab/tsconfig-paths-webpack-plugin