Giters

scarcoco / projx

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Webpack

scarcoco opened this issue · comments

commented

Webpack 知识点记录

TypeScript 配置 Webpack

https://webpack.js.org/configuration/configuration-languages/

使用函数形式的 Webpack 配置

大概格式如下：

export default (env, args) => {
  return {}
}

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
...
commented

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