webpack
我是一个脸
这个作者很懒,什么都没留下…
展开
-
webpack知识整理
webpack基础webpack——基本安装(一)webpack——使用webpack配置文件(二)webpack——加载css、图片和字体(三)webpack——管理输出(四)webpack——开发(五)webpack——模块热更新(六)webpack——使用babel处理es6语法(七)webpack——实现对React代码的打包(八)webpack——tree shaking(九)webpack——生产环境构建(十)webpack——Code Splitting(十一)webp原创 2020-06-09 16:18:36 · 203 阅读 · 0 评论 -
webpack实战——多页面打包配置(八)
在src目录下新建list.jssrc/index.jsimport React, {Component} from 'react'import ReactDom from 'react-dom'class App extends Component{ render() { return ( <div> <div>this is home page </div>原创 2020-06-04 19:49:59 · 172 阅读 · 0 评论 -
webpack实战——webpack性能优化(七)
提升webpack打包速度的方法:1.升级工具的版本(webpack、node、npm、yarn)2.在尽可能少的模块上应用loader,让它作用范围小3.plugin尽可能精简并确保可靠4.resolve参数合理配置import from 文件名 (引用的时候可以不写文件名后缀)resolve: { extensions: ['.js', '.jsx'] //先找以js结尾的文件,再找以jsx结尾的文件}import from 目录(没有具体的文件)resolve: { exten原创 2020-06-04 17:44:49 · 192 阅读 · 0 评论 -
webpack手写——bundler源码编写(三)
项目初始化新建项目bundler,在目录下新建src目录,在目录新建文件, 目录结构如下:word.jsexport const word = 'hello'message.jsimport {word} from './word.js'const message = `say ${word}`export default messageindex.jsimport {message} from './message.js'console.log(message)实现打包工具原创 2020-06-03 15:41:23 · 172 阅读 · 0 评论 -
webpack手写——编写一个plugin(二)
项目初始化1.新建一项目plugin并初始化npm init -y2.安装webpack: npm install webpack webpack-cli --save-dev3.新建src目录,在src目录下新建index.jsindex.jsconsole.log('hello world')4.在根目录下新建webapck.config.jswebapck.config.jsconst path = require('path')module.exports = { mod原创 2020-06-03 11:19:59 · 366 阅读 · 0 评论 -
webpack手写——编写一个loader(一)
新建一项目make-loader并初始化项目npm init -y安装npm install webpack webpack-cli --save-dev添加脚本:"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "webpack" },在根目录下新建一文件webpack.config.jswebpack.config.jsconst path = r原创 2020-06-03 09:59:14 · 260 阅读 · 0 评论 -
webpack——webpack与浏览器缓存(十六)
调整项目项目结构:src/index.jsimport _ from 'lodash'import $ from 'jquery'const dom = $('<div>')dom.html(_.join(['yang', 'yue', 'dingli'], ' '))$('body').append(dom)webpack.common.jsconst path = require('path')const HtmlWebpackPlugin = require('h原创 2020-06-02 11:58:05 · 354 阅读 · 0 评论 -
webpack实战——eslint在webpack中的配置(六)
什么是eslint?用来约束规范我们的代码安装eslint工具:npm install eslint --save-dev生成配置文件:npx eslint --initkatedeMacBook-Air:lesson1_5-6 kate$ npx eslint --init? How would you like to use ESLint? To check syntax, find problems, and enforce code style? What type of mod原创 2020-06-02 11:15:59 · 348 阅读 · 0 评论 -
webpack实战——解决单页面应用路由问题(五)
在src目录下新建list.js 和 home.jslist.jsimport React, { Component } from 'react'class List extends Component { render() { return <div>ListPage</div> }}export default Listhome.jsimport React, {Component} from 'react'class Home原创 2020-06-02 10:12:56 · 222 阅读 · 0 评论 -
webpack实战——proxy配置(四)
发送ajax请求安装:npm install axios --save-devsrc/index.js// 安装: npm i react react-dom --save//react: https://babeljs.io/docs/en/babel-preset-react//remove the `import '@babel/polyfill'` call or use `useBuiltIns: 'entry'` instead// import "@babel/polyfi原创 2020-06-01 22:13:26 · 744 阅读 · 0 评论 -
webpack实战——TS的打包配置(三)
项目初始1.新建一项目type-script并初始化npm init -y2.新建webpack.config.js3.新建目录src,在src目录下新建index.tsx4.安装webpack 和webpack-clinpm install webpack webpack-cli --save-devindex.tsxclass Greeter { greeting: string constructor(message: string) { this.原创 2020-06-01 21:14:13 · 978 阅读 · 0 评论 -
webpack实战——PWA的打包配置(二)
在服务器上运行代码模拟后端服务器安装npm install http-server --save-devsrc/index.jsconsole.log('hello')webpack.common.jsconst path = require('path')const HtmlWebpackPlugin = require('html-webpack-plugin')const {CleanWebpackPlugin} = require('clean-webpack-plugin')原创 2020-06-01 17:40:47 · 365 阅读 · 0 评论 -
webpack实战——Library的打包(一)
打包库文件创建一新项目library,并初始化,生成一package.json文件npm init -ypackage.json{ "name": "library", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { }, "keywords": [], "author": "KATE", "license": "MIT"}新建一src目录,在src目原创 2020-06-01 16:09:37 · 443 阅读 · 1 评论 -
webpack——css文件的代码分割(十五)
为页面添加样式:在src目录下新建style.csssrc/style.cssbody { background: purple;}src/index.jsimport './style.css'运行npx run dev-build,页面可以看到样式,webpack在做打包的时候会把css文件打包在js里需求: 想要把引入的 css 打包成单独的一个文件,需要使用MiniCssExtractPluginMiniCssExtractPlugin使用的参考链接: https://原创 2020-06-01 10:39:33 · 217 阅读 · 0 评论 -
webpack——打包分析,preloading,prefetching(十四)
1.打包分析打包分析参考链接: https://github.com/webpack/analyse使用下面命令先打包生成一个stats.json文件:webpack --profile --json > stats.json对于package.json做如下修改:“scripts”: {“dev-build”: “webpack --profile --json > stats.json --config ./build/webpack.dev.js”},运行npm run原创 2020-05-29 14:07:30 · 206 阅读 · 0 评论 -
webpack——懒加载(十三)
web pack.common.jsconst path = require('path')const HtmlWebpackPlugin = require('html-webpack-plugin')const {CleanWebpackPlugin} = require('clean-webpack-plugin')module.exports = { module: { rules: [ { test: /\.j原创 2020-05-28 16:19:32 · 153 阅读 · 0 评论 -
webpack——SplitChunksPlugin配置参数(十二)
代码分隔底层使用到了SplitChunksPlugin,所以接下来讲解一下SplitChunksPlugin参数的配置。上一节执行异步代码的生成目录如下:文件名为0.bundle.js,希望将文件名改为英文的可识别的名字,可以在异步加载组件当中加一段魔法注释://魔法注释: /* webpackChunkName: “lodash” */src/index.jsfunction getComponent() { return import(/* webpackChunkName: "lo原创 2020-05-28 15:44:47 · 500 阅读 · 0 评论 -
webpack——Code Splitting(十一)
一.调整目录1.2.添加脚本:package.json"scripts": { "dev": "webpack-dev-server --config ./build/webpack.dev.js", "build": "webpack --config ./build/webpack.prod.js", "dev-build": "webpack --config ./build/webpack.dev.js" },运行npm run dev-build,在bui原创 2020-05-28 11:50:42 · 129 阅读 · 0 评论 -
webpack——生产环境构建(十)
1.配置开发环境(development)和生产环境(production)的构建目标差异很大。在开发环境中,我们需要具有强大的、具有实时重新加载(live reloading)或热模块替换(hot module replacement)能力的 source map 和 localhost server。而在生产环境中,我们的目标则转向于关注更小的 bundle,更轻量的 source map,以及更优化的资源,以改善加载时间。由于要遵循逻辑分离,我们通常建议为每个环境编写彼此独立的 webpack 配置原创 2020-05-27 22:24:53 · 159 阅读 · 0 评论 -
webpack——tree shaking(九)
在src目录下新建一个math.js文件,现在目录结构如下:src/math.jsexport const add = (a, b) => { console.log( a + b )}export const minus = (a, b) => { console.log( a - b )}src/index.jsimport { add } from './math.js'add(1, 2)现在让我们运行npx webpack,并检查输出的 bundl原创 2020-05-27 21:04:41 · 158 阅读 · 0 评论 -
webpack——实现对React代码的打包(八)
参考链接: https://babeljs.io/docs/en/babel-preset-react安装:npm i react react-dom --savenpm install --save-dev @babel/preset-reactsrc/index.jsimport "@babel/polyfill"import React, {Component} from 'react'import ReactDom from 'react-dom'class App extend原创 2020-05-24 16:10:32 · 277 阅读 · 0 评论 -
webpack——使用babel处理es6语法(七)
1.使用babel参考链接:https://babeljs.io/setup#installation安装:npm install --save-dev babel-loader @babel/core在src目录下新建index.jssrc/index.js//es6语法const arr = [ new Promise(() => {}), new Promise(() => {})]arr.map(item => { console.l原创 2020-05-24 15:47:33 · 2706 阅读 · 0 评论 -
webpack——模块热更新(六)
模块热更新(Hot Module Replacement 或 HMR)是 webpack 提供的最有用的功能之一。它允许在运行时更新各种模块,而无需进行完全刷新。启用 HMR启用此功能实际上相当简单。而我们要做的,就是更新 webpack-dev-server 的配置,和使用 webpack 内置的 HMR 插件。webpack.config.jsconst path = require('path')const HtmlWebpackPlugin = require('html-webpack-原创 2020-05-24 11:58:43 · 260 阅读 · 0 评论 -
webpack——开发(五)
1.使用 source map当 webpack 打包源代码时,可能会很难追踪到错误和警告在源代码中的原始位置。例如,如果将三个源文件(a.js, b.js 和 c.js)打包到一个 bundle(bundle.js)中,而其中一个源文件包含一个错误,那么堆栈跟踪就会简单地指向到 bundle.js。这并通常没有太多帮助,因为你可能需要准确地知道错误来自于哪个源文件。为了更容易地追踪错误和警告,JavaScript 提供了 source map 功能,将编译后的代码映射回原始源代码。如果一个错误来自于原创 2020-05-24 10:06:41 · 496 阅读 · 0 评论 -
webpack——管理输出(四)
1.预先准备首先,让我们调整一下我们的项目:我们在 src/print.js 文件中添加一些逻辑:function print() { console.log("haha!!!")}export default print并且在 src/index.js 文件中使用这个函数:src/index.jsimport print from './print'var dom = document.getElementById("root")var btn = document.cr原创 2020-05-23 17:12:07 · 167 阅读 · 0 评论 -
webpack——加载css、图片和字体(三)
我们尝试整合一些其他资源,比如图像,看看 webpack 如何处理。1.加载css为了从 JavaScript 模块中 import 一个 CSS 文件,你需要在 module 配置中 安装并添加 style-loader 和 css-loader:npm install --save-dev style-loader css-loaderwebpack.config.js添加规则const path = require('path')module.exports = { //默认是原创 2020-05-23 15:38:04 · 619 阅读 · 0 评论 -
webpack——使用webpack配置文件(二)
在 webpack 4 中,可以无须任何配置使用,然而大多数项目会需要很复杂的设置,这就是为什么 webpack 仍然要支持配置文件。这比在终端(terminal)中手动输入大量命令要高效的多,所以让我们创建一个取代使用 CLI 选项方式的配置文件:在根目录下新建webpack.config.jsconst path = require('path')module.exports = { entry: { main: './src/index.js', //入口文件 }原创 2020-05-23 11:34:49 · 262 阅读 · 0 评论 -
webpack——基本安装(一)
webpack基本安装首先我们创建一个目录,初始化 npm,然后 在本地安装 webpack,接着安装 webpack-cli(此工具用于在命令行中运行 webpack)npm init -ynpm install webpack webpack-cli --save-dev创建以下目录结构、文件和内容:src/header.jsfunction Header() { var dom = document.getElementById("root") var header =原创 2020-05-23 10:55:26 · 207 阅读 · 0 评论