从零配置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来启动服务啦
支持加载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官网链接
本文配置将持续升级优化
从零配置webpack(react+less+typescript+mobx)的更多相关文章
- 使用parcel打造一个零配置的react工作流
parcel是一个前端打包工具.因其推崇的零配置理念,和webpack形成了鲜明对比.对于我这样一个被后端IDE智能提示宠坏的猿,自然是对webpack提不起爱.平时也都是使用CLI默认配置好webp ...
- 从零构建一个react+webpack+typescript的应用
今天要完成在windows下从零开始构建一个react应用的任务 首先,新建一个文件夹,然后在该文件夹下使用命令npm init 初始化一个node项目. 然后安装所需依赖, npm i react ...
- Webpack+React+ES6 最新环境搭建和配置（2017年）
刚刚学习React,发现React在ES6下的语法才是本体,结合ES6新的语言特性,使组件化开发显得更加直观.而且现在的Angular2也开始使用支持强类型的TypeScript,转译(transpi ...
- webpack react基础配置一
简单介绍webpack react基本配置,入门型: 环境配置: 依赖nodejs,官网下载最新版的nodejs:nodejs.org/en 安装完nodejs npm便自动集成了,通过npm安装其 ...
- 【webpack系列】从零搭建 webpack4+react 脚手架（一）
搭建一个React工程的方式有很多,官方也有自己的脚手架,如果你和我一样,喜欢刨根究底,从零开始自己一行一行代码创建一个React脚手架项目,那你就来对地方了.本教程是针对React新手,以及对web ...
- Webpack+React项目入门——入门及配置Webpack
一.入门Webpack 参考文章:<入门Webpack,看这篇就够了> 耐心看完这篇非常有帮助 二.React+Webpack环境配置 参考文章:<webpack+react项目初体 ...
- Jest+Enzyme React js/typescript测试环境配置案例
本文案例github:https://github.com/axel10/react-jest-typescript-demo 配置jest的react测试环境时我们可以参考官方的配置教程: http ...
- Parcel.js + Vue 2.x 极速零配置打包体验
继 Browserify.Webpack 之后,又一款打包工具 Parcel 横空出世 Parcel.js 的官网有这样的自我介绍 “极速零配置Web应用打包工具” 简单接触了一下,单从效率上来说,确 ...
- Parcel + Vue 2.x 极速零配置打包体验
继 Browserify.Webpack 之后,又一款打包工具 Parcel 横空出世 Parcel.js 的官网有这样的自我介绍 “极速零配置Web应用打包工具” 简单接触了一下,单从效率上来说,确 ...
随机推荐
- Flutter——消息框（Fluttertoast）
引入依赖: dependencies: fluttertoast: ^3.1.3 import 'package:flutter/material.dart'; import 'package:flu ...
- nginx的应用【静态代理、动静分离】
Nginx主要应用: 静态web服务器 负载均衡 静态代理虚拟主机 静态代理 :把所有静态资源的访问改为访问nginx,而不是访问tomcat,因为nginx更擅长于静态资源的处理,性能更好,效率更高 ...
- Jenkins安装Slave节点
在系统管理----节点管理下 创建完成后会出现slave节点启动的命令,下载agent.jar,然后启动服务 Master-slave相当于Server和Agent,master管理job和slave ...
- 19 使用Vue实例的render方法渲染组件
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- NOIP2018 保卫王国（动态DP）
题意 求最小权值点覆盖. mmm次询问,每次给出两个点,分别要求每个点必须选或必须不选,输出每次的最小权值覆盖或者无解输出−1-1−1 题解 强制选或者不选可以看做修改权值为±∞\pm\infin±∞ ...
- markdown 显示图片的三种方式
插入网络图片 插入本地图片 base64 图片(data:image/png;base64,iVBORw0KG........) ps:base64编码的图片可以通过站长工具编码 https://to ...
- SqlProfilter监控指定数据库数据表——监控linq组合查询生成的sql
1.例子 实际测试环境中往往很多测试都在调用数据库,那么如何使用SqlProfilter监控筛选到自己想要监看的数据库对应的表有关linq生成的sql时候就需要做如下设置了 ........... u ...
- 使用 ServerSocket 建立聊天服务器-2
1. 从serverListener中可以看出,每一个客户端创建新的请求之后,都会把它分配给一个独立的chatsocket ,但是每一个ChatSocket都是相互独立的,他们之间并不能沟通,所以要新 ...
- scheduled定时任务+实例请求数据库
1.scheduled定时任务类:ScheduledDemo.java package com.nantian.scheduled; import java.util.Date; import org ...
- 使用Ajax和一般处理程序实现文件上传与下载
1.使用HTML的input标签 <input type="file" multiple="multiple" id="file_load&qu ...