从零配置webpack(react+less+typescript+mobx)

本文目标

从零搭建出一套支持react+less+typescript+mobx的webpack配置

最简化webpack配置

首页要初始化yarn和安装webpack的依赖

yarn init -y
yarn add webpack webpack-cli -D

根目录下新建webpack.config.js文件，内容如下

const path = require(‘path‘);

module.exports = {
    mode: ‘development‘,
    // 入口 这里应用程序开始执行
    entry: path.resolve(__dirname, ‘src/index.tsx‘),
    // 出口
    output: {
        // 输出文件的目标路径
        path: path.resolve(__dirname, ‘dist‘),
        // 输出的文件名
        filename: ‘bundle.js‘,
        // 输出解析文件的目录。静态资源最终访问路径 = output.publicPath + 资源loader或插件等配置路径
        publicPath: ‘/‘
    }
}

使用命令进行打包

webpack --mode production

另外亦可以将命令配置到 package.json 中的 scripts 字段

"scripts": {
    "build": "webpack --mode production"
},

执行命令 yarn build 即可打包

使用模版html

html-webpack-plugin 插件 可以指定template模板文件，将会在output目录下，生成html文件，并引入打包后的js.

安装依赖

yarn add html-webpack-plugin -D

在webpack.config.js增加plugins配置

const HtmlWebpackPlugin = require(‘html-webpack-plugin‘);
module.exports = {
    //...other code
    plugins: [
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, ‘src/index.html‘)
        })
    ]
}

html-webpack-plugin 插件 还支持title、minify、filename等其他参数

配置webpack-dev-server

webpack-dev-server提供了一个简单的Web服务器和实时热更新的能力，有助于开发。

安装依赖

yarn add webpack-dev-server -D

在webpack.config.js中增加devServer配置

const path = require(‘path‘);
const HtmlWebpackPlugin = require(‘html-webpack-plugin‘);
module.exports = {
    //...other code
    devServer: {
        hot: true,
        port: 3000,
        open: true,
        contentBase: path.resolve(__dirname, ‘dist‘),
        // 开发模式下写/就行啦
        publicPath: ‘/‘,
    }
}

在 package.json 的 scripts 字段中增加 start模式

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

这样我们就可以通过yarn start来启动服务啦

官网devServer

链接Webpack中publicPath详解

支持加载css文件

通过使用不同的 style-loader 和 css-loader, 可以将 css 文件转换成js    文件类型。

安装依赖

yarn add style-loader css-loader -D

在webpack.config.js中增加loader配置

module.exports = {
    //other code
    module: {
        rules: [
            {
                test: /\.css/,
                use: [‘style-loader‘, ‘css-loader‘],
                exclude: /node_modules/,
                include: path.resolve(__dirname, ‘src‘)
            }
        ]
    }
}

loader 可以配置以下参数:

  • test: 匹配处理文件的扩展名的正则表达式
  • use: loader名称
  • include/exclude: 手动指定必须处理的文件夹或屏蔽不需要处理的文件夹
  • query: 为loader提供额外的设置选项

支持图片加载

需要引入两个loader

  • file-loader: 解决CSS等文件中的引入图片路径问题
  • url-loader: 当图片小于limit的时候会把图片Base64编码，大于limit参数的时候还是使用file-loader进行拷贝

如果希望图片存放在单独的目录下，那么需要指定outputPath

 

安装依赖

yarn add url-loader file-loader -D

在 webpack.config.js 中增加 loader 的配置(增加在 module.rules 的数组中)。

module.exports = {
    //other code
    module: {
        rules: [
            {
                test: /\.(gif|jpg|png|bmp|eot|woff|woff2|ttf|svg)/,
                use: [
                    {
                        loader: ‘url-loader‘,
                        options: {
                            limit: 8192,
                            outputPath: ‘images‘
                        }
                    }
                ]
            }
        ]
    }
}

支持编译less

很多前端都喜欢写less，所以支持less也是需要的。（sass配置方法基本相同）

安装依赖

yarn add less less-loader -D

在 webpack.config.js 中增加 loader 的配置(module.rules 数组中)。

module.exports = {
    //other code
    module: {
        rules: [
            {
                test: /\.less/,
                use: [‘style-loader‘, ‘css-loader‘, ‘less-loader‘],
                exclude: /node_modules/,
                include: path.resolve(__dirname, ‘src‘)
            },
        ]
    }
}        
 

支持转义 ES6/ES7/JSX(react)

安装ES6/ES7/JSX 转义需要 Babel 的依赖，支持装饰器。

yarn add @babel/core babel-loader @babel/preset-env @babel/preset-react @babel/plugin-proposal-decorators @babel/plugin-proposal-object-rest-spread -D

在 webpack.config.js 中增加 loader 的配置(module.rules 数组中)。

module.exports = {
    //other code
    module: {
        rules: [
            {
                test: /\.jsx?$/,
                use: [
                    {
                        loader: ‘babel-loader‘,
                        options: {
                            presets: [‘@babel/preset-env‘, ‘@babel/react‘],
                            plugins: [
                                [
                                  "@babel/plugin-proposal-decorators",
                                  { "legacy": true }
                                ]
                            ]
                        }
                    }
                ],
                include: path.resolve(__dirname, ‘src‘),
                exclude: /node_modules/
            },
        ]
    }
}

压缩JS文件

安装依赖

yarn add uglifyjs-webpack-plugin -D

在 webpack.config.js 中增加 optimization 的配置

const UglifyWebpackPlugin = require(‘uglifyjs-webpack-plugin‘);

module.exports = {
    //other code
    optimization: {
        minimizer: [
            new UglifyWebpackPlugin({
                parallel: 4
            })
        ]
    }
}

分离出CSS

因为CSS的下载和JS可以并行，当一个HTML文件很大的时候，可以把CSS单独提取出来加载

安装依赖

yarn add mini-css-extract-plugin -D

在 webpack.config.js 中增加 plugins 的配置,并且将 ‘style-loader‘ 修改为 { loader: MiniCssExtractPlugin.loader}。CSS打包在单独目录，那么配置filename。

const MiniCssExtractPlugin = require(‘mini-css-extract-plugin‘);

module.exports = {
    //other code
    module: {
        rules: [
            {
                test: /\.css/,
                use: [{ loader: MiniCssExtractPlugin.loader}, ‘css-loader‘],
                exclude: /node_modules/,
                include: path.resolve(__dirname, ‘src‘)
            },
            {
                test: /\.less/,
                use: [{ loader: MiniCssExtractPlugin.loader }, ‘css-loader‘, ‘less-loader‘],
                exclude: /node_modules/,
                include: path.resolve(__dirname, ‘src‘)
            },
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: ‘css/[name].css‘
        })
    ]
}

压缩CSS文件

安装依赖

yarn add optimize-css-assets-webpack-plugin -D

在 webpack.config.js 中的 optimization 中增加配置

const OptimizeCssAssetsWebpackPlugin = require(‘optimize-css-assets-webpack-plugin‘);

module.exports = {
    //other code
    optimization: {
        minimizer: [
            new OptimizeCssAssetsWebpackPlugin()
        ]
    }
}

支持react和mobx

安装react依赖

yarn add react react-dom

安装mobx依赖

yarn add mobx mobx-react

支持typescript

安装依赖

yarn add typescript awesome-typescript-loader -D

安装react的类型依赖(否则会有命名空间和.d.ts相关报错)

yarn add @types/react @types/react-dom

在 webpack.config.js 中增加 loader 的配置(module.rules 数组中)。

module.exports = {
    //other code
    module: {
        rules: [
             {
                test: /\.(tsx|ts)?$/,
                loader: "awesome-typescript-loader",
                exclude: /node_modules/,
                include: path.resolve(__dirname, ‘src‘)
            }
        ]
    }
}

在根目录下添加tsconfig.json

{
  "compilerOptions": {
    "baseUrl": ".",
    "outDir": "build/dist",
    "module": "esnext",
    "target": "es5",
    "lib": ["es6", "dom"],
    "sourceMap": true,
    "allowJs": true,
    "jsx": "react",
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "rootDir": "./",
    "forceConsistentCasingInFileNames": true,
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noImplicitAny": false,
    "importHelpers": true,
    "strictNullChecks": true,
    "suppressImplicitAnyIndexErrors": true,
    "noUnusedLocals": false,
    "allowSyntheticDefaultImports": true
  },
  "exclude": [
    "node_modules",
    "build",
    "scripts",
    "acceptance-tests",
    "webpack",
    "jest",
    "src/setupTests.ts"
  ]
}

在根目录下添加tslint.json

{
  "extends": ["tslint:recommended", "tslint-react", "tslint-config-prettier"],
  "rules": {
    "no-empty-interface":false,
    "no-empty-block":false,
    "no-unused-expression":false,
    "object-literal-sort-keys":false,
    "no-empty":false,
    "semicolon": [false, "always"],
    "no-default-export": false,
    "member-access": true,
    "ordered-imports": false,
    "import-sources-order": "any",
    "named-imports-order": "any",
    "interface-over-type-literal":false,
    "jsx-no-lambda":false,
    "variable-name": [
      true,
      "ban-keywords",
      "check-format",
      "allow-leading-underscore",
      "allow-trailing-underscore",
      "allow-pascal-case",
      "allow-snake-case"
    ],
    "no-console": false,
    "no-angle-bracket-type-assertion": false,
    "jsx-no-string-ref":false,
    "prefer-for-of":false,
    "member-ordering":false,
    "only-arrow-functions":false,
    "object-literal-shorthand":false
  },
  "linterOptions": {
    "exclude": [
      "config/**/*.js",
      "node_modules/**/*.ts",
      "coverage/lcov-report/*.js"
    ]
  },
  "strict": false
}

打包前先清空输出目录

安装依赖

yarn add clean-webpack-plugin -D

在 webpack.config.js 中增加 plugins 的配置

const {CleanWebpackPlugin} = require(‘clean-webpack-plugin‘);

module.exports = {
    //other code
    plugins: [
        new CleanWebpackPlugin()
    ]
}

( 注意3.0版本的clean-webpack-plugin有大改动，需要通过构造函数取出CleanWebpackPlugin再用 )

至此，webpack配置已经基本能满足react+less+typescript+mobx开发需求。

完整webpack.config.js和package.json文件

webpack.config.js文件

const path = require(‘path‘);
// 打包html的插件
const HtmlWebpackPlugin = require(‘html-webpack-plugin‘);
// 压缩JS的插件
const UglifyWebpackPlugin = require(‘uglifyjs-webpack-plugin‘);
// 分离css文件
const MiniCssExtractPlugin = require(‘mini-css-extract-plugin‘);
// 打包前先清空输出目录
const {CleanWebpackPlugin} = require(‘clean-webpack-plugin‘);

module.exports = {
    mode: ‘development‘,
    // 入口 这里应用程序开始执行
    entry: path.resolve(__dirname, ‘src/index.tsx‘),
    // 出口
    output: {
        // 所有输出文件的目标路径
        path: path.resolve(__dirname, ‘dist‘),
        // 输出的文件名
        filename: ‘bundle.js‘,
        // 输出解析文件的目录，url 相对于 HTML 页面， publicPath 上线时配置的是cdn的地址。
        // 静态资源最终访问路径 = output.publicPath + 资源loader或插件等配置路径
        publicPath: ‘./‘
    },
    devServer: {
        hot: true,
        port: 3000,
        open: true,
        contentBase: path.resolve(__dirname, ‘dist‘),
        publicPath: ‘/‘,
        // stats: ‘none‘
    },
    module: {
        rules: [
            /*
            * 支持css
            * 通过使用不同的 style-loader 和 css-loader, 可以将 css 文件转换成JS文件类型。
            * */
            {
                test: /\.css/,
                // use: [‘style-loader‘, ‘css-loader‘],
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader
                    },
                    ‘css-loader‘
                ],
                exclude: /node_modules/,
                include: path.resolve(__dirname, ‘src‘)
            },
            /*
            * 支持编译less和sass
            * */
            {
                test: /.less/,
                // use: [‘style-loader‘, ‘css-loader‘, ‘less-loader‘],
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader
                    },
                    ‘css-loader‘,
                    ‘less-loader‘
                ],
                exclude: /node_modules/,
                include: path.resolve(__dirname, ‘src‘)
            },
            /*
            * 支持加载图片
            * file-loader: 解决CSS等文件中的引入图片路径问题
            * url-loader: 当图片小于limit的时候会把图片Base64编码，大于limit参数的时候还是使用file-loader进行拷贝
            * */
            {
                test: /\.(gif|jpg|png|bmp|eot|woff|woff2|ttf|svg)/,
                use: [
                    {
                        loader: ‘url-loader‘,
                        options: {
                            limit: 1,
                            outputPath: ‘images‘
                        }
                    }
                ]
            },
            /*
            * 支持转义 ES6/ES7/JSX  ,支持react
            * ES6/ES7/JSX 转义需要 Babel 的依赖，支持装饰器。
            * */
            {
                test: /\.jsx?$/,
                use: [
                    {
                        loader: "babel-loader",
                        options: {
                            presets: [‘@babel/preset-env‘, ‘@babel/react‘],
                            plugins: [
                                [
                                    "@babel/plugin-proposal-decorators",
                                    // "@babel/plugin-proposal-class-properties",
                                    {
                                        "legacy": true
                                    }
                                ]
                            ]
                        }
                    }
                ],
                exclude: /node_modules/,
                include: path.resolve(__dirname, ‘src‘)
            },
            /*
           * 支持转义 支持typescript
           * ES6/ES7/JSX 转义需要 Babel 的依赖，支持装饰器。
           * */
            {
                test: /\.(tsx|ts)?$/,
                loader: "awesome-typescript-loader",
                exclude: /node_modules/,
                include: path.resolve(__dirname, ‘src‘)
            }
        ]
    },
    optimization: {
        minimizer: [
            new UglifyWebpackPlugin({
                parallel: 4
            })
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, ‘public/index.html‘)
        }),
        new MiniCssExtractPlugin({
            filename:‘css/[name].css‘
        }),
        new CleanWebpackPlugin()
    ]
};

package.json文件

{
  "name": "webpack_cli",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "start": "webpack-dev-server --mode development",
    "build": "webpack --mode production"
  },
  "devDependencies": {
    "@babel/core": "^7.5.5",
    "@babel/plugin-proposal-decorators": "^7.4.4",
    "@babel/plugin-proposal-object-rest-spread": "^7.5.5",
    "@babel/preset-env": "^7.5.5",
    "@babel/preset-react": "^7.0.0",
    "@types/react": "^16.9.2",
    "@types/react-dom": "^16.8.5",
    "awesome-typescript-loader": "^5.2.1",
    "babel-loader": "^8.0.6",
    "clean-webpack-plugin": "^3.0.0",
    "css-loader": "^3.2.0",
    "file-loader": "^4.2.0",
    "html-webpack-plugin": "^3.2.0",
    "less": "^3.10.1",
    "less-loader": "^5.0.0",
    "mini-css-extract-plugin": "^0.8.0",
    "optimize-css-assets-webpack-plugin": "^5.0.3",
    "style-loader": "^1.0.0",
    "typescript": "^3.5.3",
    "uglifyjs-webpack-plugin": "^2.2.0",
    "url-loader": "^2.1.0",
    "webpack": "^4.39.2",
    "webpack-cli": "^3.3.7",
    "webpack-dev-server": "^3.8.0"
  },
  "dependencies": {
    "mobx": "^5.13.0",
    "mobx-react": "^6.1.3",
    "react": "^16.9.0",
    "react-dom": "^16.9.0"
  }
}

学习更多webpack配置请进入webpack官网 webpack官网链接

本文配置将持续升级优化

原文地址：https://www.cnblogs.com/piaobodewu/p/11374475.html

时间： 2024-11-10 07:46:30

从零配置webpack(react+less+typescript+mobx)的相关文章

Webpack + React全栈工程架构项目实战精讲

详情请交流  QQ  709639943 01.Webpack + React全栈工程架构项目实战精讲 02.跨平台混编框架 MUI 仿豆瓣电影 APP 03.Node.js入门到企业Web开发中的应用 04.Python3 全网最热的Python3入门+进阶 比自学更快上手实际开发 05.Java秒杀系统方案优化 高性能高并发实战 06.Java深入微服务原理改造房产销售平台 07.快速上手Linux 玩转典型应用 08.全面系统讲解CSS 工作应用+面试一步搞定 09.Java Spring

webpack + react + es6, 并附上自己碰到的一些问题

最近一直在学react,react的基础部分已经学得差不多了,然而自己并没有做详细的记录,有兴趣的同志可以参考阮一峰老师的教程,个人觉得挺不错的,链接如下:https://github.com/ruanyf/react-babel-webpack-boilerplate, 学完了基础就想倒腾倒腾,webpack整合react加es6. 1.webpack + react + es6 1.1 新建项目 项目目录如下 具体的内容就不解释了,大家应该都看得懂 1.2 配置webpack 配置文件如下

webpack+react+antd 单页面应用实例

webpack+react+antd 单页面应用实例 React框架已经火了好长一段时间了,再不学就out了! 对React还没有了解的同学可以看看我之前的一篇文章,可以快速简单的认识一下React.React入门最好的实例-TodoList 自己从开始接触react一窍不通,到慢慢的似懂非懂,通过各种途径学习也有一阵了.学习过程中还会接触到很多新的东西,比如ES6.webpack,过程艰辛谁人懂,见坑填坑慢慢来.今天把学习过程过滤了一下,只说项目实际需要用的东西,总结了一套能看到的东西,分享给

使用 webpack + react + redux + es6 开发组件化前端项目

因为最近在工作中尝试了 webpack.react.redux.es6 技术栈,所以总结出了一套 boilerplate,以便下次做项目时可以快速开始,并进行持续优化. 项目结构规划 每个模块相关的 css.img.js 文件都放在一起,比较直观,删除模块时也会方便许多.测试文件也同样放在一起,哪些模块有没有写测试,哪些测试应该一起随模块删除,一目了然. build |-- webpack.config.js # 公共配置 |-- webpack.dev.js # 开发配置 |-- webpac

前端新手如何搭建webpack+react的开发环境

步骤: 首先保证有node 和 npm环境.运行node -v 和npm -v查看版本号来确定 注意: 初始化npm环境并安装插件: 没有项目:想在Window命令下创建项目 有项目:cd 到相应的项目 进入之后,运行npm init (初始化)按照步骤依次确认 yes 最终生成package.json文件. 所有使用npm做的依赖管理项目,根目录下都会有一个这个文件,该文件 描述了项目的基本信息以及一些第三方依赖插件 安装插件 使用 webpack 作为构建工具,需要安装相应插件,运行 npm

webpack+react+redux+es6

一.预备知识 node, npm, react, redux, es6, webpack 二.学习资源 ECMAScript 6入门 React和Redux的连接react-redux Redux 入门教程   redux middleware 详解   Redux研究 React 入门实例教程 webpack学习demo NPM 使用介绍 三.工程搭建 之前有写过 webpack+react+es6开发模式 ,文章里介绍了一些简单的配置,欢迎访问. 1.可以npm init, 创建一个新的工程

webpack+react+redux+es6开发模式

一.预备知识 node, npm, react, redux, es6, webpack 二.学习资源 ECMAScript 6入门 React和Redux的连接react-redux Redux 入门教程   redux middleware 详解   Redux研究 React 入门实例教程 webpack学习demo NPM 使用介绍 三.工程搭建 之前有写过 webpack+react+es6开发模式 ,文章里介绍了一些简单的配置,欢迎访问. 1.可以npm init, 创建一个新的工程

手把手教你如何使用webpack+react

上一篇随笔讲述了新手入门入门前端 里面提到的第四阶段跟上当前前端的发展需要入门一个框架和自动化工具,当时推荐的是webpack+react 今天正好有空,也把自己入门webpack + react 的艰辛过程写下来, 现在想起来真是一脸泪.过程不表了, 现在将我看到的一些教程总结一下,挑选出对新手比较友好的学习过程.   第一步: webpack 和 react  是要配合node.js 一起使用的. 去node.js官网下载当前node, 官网会根据你的环境匹配你适合的版本,直接下载安装就好了

webpack+react+es6开发模式

一.前言 实习了两个月,把在公司用到的前端开发模式做个简单的整理.公司里前端开发模式webpack+react+redux+es6,这里去掉了redux. webpack, react, redux等学习网址:http://www.cnblogs.com/hujunzheng/p/5405780.html 二.简单的步骤条组件 1.通过react自定义的组件进行模拟   注:只是用了react,用到相关react的js请到 https://github.com/hjzgg/webpack-rea