// webpack 安装教程
// npm init -->一直回车就好 npm init -y 就可以不用回车 直接帮生成文件
// npm install webpack webpack-cli -g 全局安装webpack 不建议
// 项目中 npm install 安装依赖包
// npm install webpack webpack-cli
// npm run webapck 运行打包
//如果不想通过 webpack.config.js 想换个名字 换成 webpackconfig.js
// 命令如下 npm webpack --config webpackconfig.js 就可以了
// 三种运行webpack 的方式
// webpack index.js
// npx webpack index.js
// npm run bundle ->wepack
// mode:"production", 打包模式 不会出现警告 WARNING in configuration
// mode:"development", 打包之后得bundle.js 代码不被压缩
//打包其他文件配置规制 因为webpack默认可以配置js文件的其他文件得需要自己配置 比如图片打包
// module: {
// rules: [{
// test: /\.jpg$/,
// use: {
// loader: 'file-loader'
// }
// }]
// },
//打包图片 不想让打包后的图名称发生改变
// 在moudle 中的use 里面添加配置项
// options: {
// name: '[name].[ext]' [ext] 表示的是原始文件的后缀 [hash] 表示 哈希值 name: '[name]_[hash].[ext]' 就是随机字符组合的名字
// }
// 打包后的图片想独单放到一个文件加可以配置
// rules: [{
// test: /\.(jpg|png|gif)$/,
// use: {
// loader: 'file-loader',
// options: {
// name: '[name].[ext]',
// outputPath: 'images/' 打包存放图片的路劲 output默认放在dist 所以images文件放打包之后放在dist文件夹中的下面
// },
// }
// }]
// 打包图片格式 file-loader 和url-loader 区别
// file-loader 图片地址不会转换base64地址
// url-loader 会把图片的原有地址转换成base64地址 然后放到你打包的js文件中 不会单独放到图片文件里面去
// 图片小的话推荐用 url-loader 应该会占用到 bundle.js文件内存里面 图片大的话 可以选择采用file-loader选择
// 可以添加配置项limit:204800（200k） 限制文件大小 如果文件小于204800 就放到bundle.js里面 如果大于就单独放到一个文件当中（他会自动存放）
//npm install url-loader -D
//npm install file-loader -D
//npm install sass-loader node-sass -D
//npm i -D postcss-loader css3各浏览器语法兼容 不用手动自己去加浏览器前缀 很方便
//安装完 postcss-loader 去项目最外层中创建postcss.config.js文件
//然后安装插件 npm install autoprefixer -D
// 在postcss.loader.js中使用autoprefixer插件
// module.exports = {
// plugins: [
// require('autoprefixer')
// ]
// }
//局部模块样式引用。
// import './index.scss'; //这样引用打包之后会全局使用这个样式文件 所以我们应该使用局部样式引用
// import style from './index.scss'; //这是局部引用样式文件 不会全局引用
// 这样就可以用 style.xxx可以独单复用于某个文件当中了 这样避免全局使用后会发生样式冲突
// 还有就是得在添加新配置项 modules:true 这个配置
// use: [
// 'style-loader',
// // 'css-loader',
// {
// loader: 'css-loader',
// options: {
// importLoaders: 2 ,
// modules:true //这个意思是开启摸块话打包
// }
// },
// 'sass-loader',
// 'postcss-loader'
// ],
// 如何打包字体库文件
// 在rules下面添加选项
//安装file-loader npm install file-loader -D
// {
// test: /\.(eot|ttf|svg|woff)$/,
// use: {
// loader: 'file-loader'
// }
// }
// 000 插件内容
// 使用webapck插件以后不用手动的在新建项目的时候，在dist目录下创建index.html了
// 1.安装插件 npm install html-webpack-plugin -D,
// 在webpack.config.js文件顶部定义
// const HtmlWebpackPlugin = require('html-webpack-plugin');
// 2.在module中添加配置项
// plugins:[
// new HtmlWebpackPlugin() 这个插件会在打包结束后，自动生成一个html文件，并把打包生成的js文件自动引入到这个html当中
// ],
// 运行打包 npm run bundle 即可自动生成index.html文件
//plugin 可以在webpack运行到某个时刻的时候，帮你做一些事情 像生命周期函数
//如果 从新打包一个dist文件之前的不要我们可以安装插件 实现从新创建dist名字的文件
// npm install clean-webpack-plugin //这是第三方插件 webpack文档中不存在
// 在webpack.config.js文件顶部定义
// const CleanWebpackPlugin = require('clean-webpack-plugin');
// plugins: [
// new HtmlWebpackPlugin({
// template: 'src/index.html' //添加这个的作用是 可以把src/index.html里面的内容打包之后 生成到dst/index.html文件当中 很方便
// }),
// new CleanWebpackPlugin(['dist'])
// ],
// entry output 基础配置
// 如果想反复打包生成两次文件
// entry: {
// main: "./src/index.js",
// sub: "./src/index.js",
// },
// 如果想反复打包生成两次文件，入口文件必须得改filename
// output: {
// // filename: "[name].js", name 是个变量 依次形成 main.js sub.js 出口文件
// path: path.resolve(__dirname, 'dist'),
// publicPath:"http://www.baid8u.com/" 加上这个配置项 就可以在引用打包文件的前缀加上 这个地址
// 比如 打包后html引用文件地址为http: //www.baid8u.com/bundle.js
// }
// sourceMap 配置
// 它是一个映射关系，他知道dist目录下main.js文件96实际上对应得是src目录下index.js文件中的第一行
// devtool:'source-map', 在webpack.config.js中配置
// 他的意义就是如果你的js文件打包出错，打开控制器查看错误会在入口文件的js查看，如果devtool:'none',设置为none之后呢只能在打包后的js文件中查看你的出错位置。这就是他的作用 他会在dist打包目录下生成一个main.js.map的文件 使用这个打包速度会放慢
// devtool:'inline-source-map', 不会生成main.js.map //#endregion
// devtool:'inline-clean-source-map' clean加上之后 它会提示告诉你精确到哪一行哪一列出错信息
// devtool:'inline-cleap-source-map' clean加上之后 它会提示告诉你精确到哪一行出错信息 这样比上面的打包性能更加优化
// cheap-module-source-map不仅管业务代码的错误 还管第三方检插件 还有loader是否有误
// eval 在代码量多的情况下 提示错误不怎么全面 打包速度虽然快
// cheap-module-eval-source-map 建议使用这方式 这个打包速度快 提示错误全面
// 如果打包环境是development
// mode: "development", 使用devtool:'cheap-module-eval-source-map' 比较好
// 如果打包环境是production
// mode: "production", 使用devtool:'cheap-module-source-map' 比较好
// 如果修改了src目录下的代码，dist目录下的的打包文件自动打包 不需要再重复的 npm run bundle
// 有三种做法
// 第一种 在package.json文件中的"script" 中 --watch
// "scripts": {
// "watch": "webpack --watch"
// },
// 加了一个--watch之后
// 运行 npm run watch 之后 只要改动入口文件 就会自动打包了 不用修改一次就得打包一次
// 第二种 在package.json文件中的"script" 中 添加"start": "webpack-dev-server" 会自动的帮我们从打包和刷新页面内容
// "scripts": {
// "bundle": "webpack --watch",
// "start": "webpack-dev-server"
// },
// 在webpack.config.js中添加配置项 devServer
// devServer: {
// contentBase: "./dist" contentBase 访问文件路径
// },
//安装 npm install webpack-dev-server -D
// 运行 npm run start
// 用localhost:8080打开即可
// devServer: {
// contentBase: "./dist",
// open:true 添加open属性 可以自动的打开网页 localhost:8080,
// },
// HotModuleReplacementPlugin 使用 可以利用devserver时候代码更新打包的时候页面不用从新加载就可以刷新页面 实现免刷新实现页面与代码同步效果
// devServer: {
// contentBase: "./dist",
// open: true,
// port: 8080,
// hot: true, hot hotOnly的开启设置为true
// hotOnly: true,
// },
// 在webpack.config.js文件的顶部 定义
// const webpack = require('webpack');
// plugins: [
// new HtmlWebpackPlugin({
// template: 'src/index.html' //添加这个的作用是 可以把src/index.html里面的内容打包之后 生成到dst/index.html文件当中 很方便
// }),
// // new CleanWebpackPlugin(['dist'])
// new webpack.HotModuleReplacementPlugin(), new一下
// ],
// 使用 babel 转换语法
// 安装babel
// npm install --save-dev babel-loader @babel/core
// 配置babel
// module: {
// rules: [
// { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }
// ]
// }
// npm install @babel/preset-env --save-dev 实现翻译模块
// {
// test: /\.js$/,
// use: {
// loader: 'file-loader',
// exclude: /node_modules/,
// loader: "babel-loader"
// },
// options: {
// "presets": ["@babel/preset-env"] 添加options 配置项
// }
// }
//使用@babel/polyfill
// 安装 npm install --save @babel/polyfill
// 入口文件导入 import "@babel/polyfill"; 浏览器兼容语法 比如es6语法
// options: { useBuiltIns:"useage" 加上这个之后只有低版本浏览器兼容的时候去帮兼容，如果浏览器兼容就不需要去主动兼容了
// "presets": [["@babel/preset-env"],{ 这样可以在低端浏览器运行 也可以在高端浏览器运行了
// useBuiltIns:"useage" //可以减小polyfill的大小，这样就可以按需转换
// }]
// }
// npm install --save-dev @babel/plugin-transform-runtime
// npm install --save @babel/runtime
// "plugins": [
// [
// "@babel/plugin-transform-runtime",
// {
// "absoluteRuntime": false,
// "corejs": 2, 默认填的是false 但是一般填2所以得安装 --》 npm install --save @babel/runtime-corejs2 改为2才能打包promise map es6语法
// "helpers": true,
// "regenerator": true,
// "useESModules": false
// }
// ]
// ]
// webpack中的 Tree Shaking 只支持 ES Module
// 在使用 Tree Shaking 而且开发环境设置为mode: "development",情况下得在moudle下配置
// optimization: {
// usedExports: true mode="production" 的环境下 可以省略 不用写
// },
// 还需要在 package.josn 文件下配置
// "sideEffects":false,
// 如果不希望 对 polly-fill 进行 Tree Shaking 那得这么设置
// "sideEffects":["@babel/polyfill","*.css"], 这样就对它不起作用了 还有css不起作用
// mode="develoment" 和mode="production" 模式的区分打包
// 如何区别分呢？
// 在项目最层创建两个环境打包的module配置
// 开发环境 webpack.dev.js
// 生产环境 webpack.prod.js
// 在package.json 中的script命令设置中
// "scripts": {
// "dev": "webpack-dev-server --config webpack.dev.js" , 开发环境打包
// "bulid":"webpack --config webpack.prod.js" 生成环境打包
// },
// 进行区分打包后 如何将webpack.dev.js 以及 webpack.prod.js 文件相同的给抽取放到webpack.common.js中
// 抽取之后如何实现合并
// 安装 npm install webapck-merge -D
// 然后再wepack.dev.js和wepack.prod.js文件中添加
// const merge = require('webpack-merge');
// const commonConfig = require('./webpack.common.js');
// const devConfig = { //开发环境配置配置
// }
// 接下来 引入模块合并
// module.exports = merge(commonConfig, devConfig);
// 运行 即可 npm run dev 运行这个命令打开开发环境 npm run bulid 生成环境
// 安装lodash npm install lodash --save
// 本来我们的打包文件有mian.js文件有2mb大小， 可是我们改了代码之后不希望又加载main.js（ 2 mb）
// Code Splitting 项目代码性能优化作用 代码分割
// 安装语法解析
// npm install babel-plugin-dynamic-import-webpack -D
// 在.babelrc文件下的 plugins:["dynamic-import-webpack"] 添加配置
// 在webpack.common.js中配置 （同步代码） 异步代码不需要配置
// optimization: { //代码分割配置
// splitChunks: {
// chunks: 'all'
// }
// },
// 多生成一个0.js打包文件
// 怎么改名字呢？
// 去package.json文件中删除这一项
// "babel-plugin-dynamic-import-webpack": "^1.1.0",
// 删除掉.babelrc文件中的 plugins: ["dynamic-import-webpack"] --> plugins:[]
// 安装动态引入插件
// npm install --save-dev @babel/plugin-syntax-dynamic-import
// 然后使用在.babelrc文件中配置 plugins: ["@babel/plugin-syntax-dynamic-import"]
// 在webpack.common.js中的splitChunks配置项添加
// splitChunks: {
// // cacheGroups: { //
// vendors: false, 配置了 这两个默认值为false 打包分割的文件名不会有vendors前缀
// default: false,
// }
//
// 在webpack.common.js中配置项添加
// optimization: { //代码分割配置
// splitChunks: {
// chunks: 'all', //同步代码 异步代码都能分割
// minSize: 30000, //js文件大小 超过30000 不进行分割
// minChunks: 1,
// maxAsyncRequests: 5, //超过五个js文件就不会进行代码分割
// maxInitialRequests: 3, //入口文件做代码分割也最多3个js文件 超过三个不做代码分割
// automaticNameDelimiter: '~',
// name: true,
// vendors: {
// test: /[\\/]node_modules[\\/]/,
// priority: -10
// },
// default: {
// minChunks: 2,
// priority: -20,
// reuseExistingChunk: true
// }
// }
// },
// cacheGroups:{ 在splitChunks可以修改.chunk.js文件名
// vendors:{
// test:/[\\/]node_modules[\\/]/,
// priority:-10,
// name:"vendors"
// }
// }
// function getComponent() {
// return import( /**webapckChunkName:'lodash' */ 'lodash').then(({
// default: _
// }) => {
// var element = document.createElement('div');
// element.innerHTML = _.join(['dell', 'lee'], '-');
// return element;
// })
// }
// document.addEventListener("click", () => {
// getComponent().then(element => {
// document.body.appendChild(element);
// })
// })
// // 使用import语法可以实现懒加载，就是加载页面的时候没有用到 就不加载代码内容，当点击click（调用点击事件） 才调用方法实现加载，这就叫做懒加载
// --preloader.josn
// document.addEventListener('click', () => {
// import( /* webpackPrefetch :true */ './click.js').then(({
// default: func
// }))
// func();
// })
/* webpackPrefetch :true */ //可以将点击交互的代码 等到你自己的页面空闲的时候加载到缓存中
// "dev-build": "webpack --profile --json > starts.json --config ./build/webpack.dev.js"
// --profile --json > starts.json --config 添加这个可以把打包文件的打包信息放入这两个json文件中
// bundle 分析(bundle analysis)
// 如果我们以分离代码作为开始，那么就以检查模块作为结束，分析输出结果是很有用处的。官方分析工具 是一个好的初始选择。
// webpack-chart: webpack 数据交互饼图。
// webpack-visualizer: 可视化并分析你的 bundle，检查哪些模块占用空间，哪些可能是重复使用的。
// webpack-bundle-analyzer: 一款分析 bundle 内容的插件及 CLI 工具，以便捷的、交互式、可缩放的树状图形式展现给用户。
// npm install jquery --save 安装jq包
// 在webpack.common.js文件中得module项中配置performance:false;打包出现性能提示问题添加这个即可接触警告
// shimming 全局变量
// 解决引用js文件 $ 问题 就是不用引用 import $ from 'jquery'
// 在plugins:[]配置项下面添加
// new webpack.ProvidePlugin({
// $: 'jquery'
// })
//如果改变模块中js文件的this指向，不用指向window
// 安装 npm install imports-loader --save-dev
// 在webpack.common.js module配置项中的js打包模块添加
// use:[
// { loader: "babel-loader"},
// { loader: "imports-loader?this=>window",}
// ],
// 环境变量的试用
// 通过全局变量传递来进行生产模式和开发模式的打包代码
// 将webpack.dev.js文件中 的 const merge = require('webpack-merge'); 放入到 webpack.common.js文件头部定义中
// 将webpack.dev.js文件中底部写 module.exports = devConfig 导出
// 将webpack.prod.js文件中底部写 module.exports = prodConfig 导出
// 在webpack.common.js文件中写下面
// module.exports ={} 改为 --> const commonConfig == {}
// module.exports = (env) => {
// if(env && env.production) {
// return merge(commonConfig,prodConfig)
// } else{
// return merge(commonConfig,devConfig)
// }
// }
// 接下来在package.json文件的script配置项中修改
// 原本：
// "dev": "webpack-dev-server --config ./build/webpack.dev.js",
// "build": "webpack --config ./build/webpack.prod.js",
// "dev-build": "webpack --config ./build/webpack.dev.js"
// 修改为：
// "dev": "webpack-dev-server --config ./build/webpack.common.js",
// "build": "webpack --env.production --config ./build/webpack.common.js", 添加--env.production这个全局变量 就可以接收到env参数的只所以为true 所以走下面的merge 打包线上环境
// "dev-build": "webpack --config ./build/webpack.common.js" 打包开发环境的话不给传全局变量 所以env参数接收不到 所以走else下面的merge
// 模拟一台服务器
// 安装 npm install http-server --save-dev
// 在package.json的script配置项中 添加
// "start": "http-server dist"
// PWA配置 Progressive Web Application
// PWA就是自己启动了localhost:8080端口，作为服务器网址，但是在自己断网的情况下服务器挂掉的情况下，还可以继续访问
// 安装 npm install workbox-webpack-plugin --save-dev
// const WorkboxPlugin = require('workbox-webpack-plugin')
// 在plugins:[
// new WorkboxPlugin.GennerateSW({
// clientsClaim:true,
// skipWatiting:true
// })
// ]
// webapck 关于TypeScript配置
// 配置好moudle项
// npm install ts-loader typescript --save-dev
// 项目最外层创建tsconfig.js配置文件
// npm install @types/lodash --save-dev
// webpack实现请求转发
// 接口开发处理
axios.get('http://www.dell-lee.com/react/api/header.json').then((res) => {
console.log(res)
}) //因为练习自己是本地地址，这个是服务器地址，进行了跨域，这个服务器地址自己配置了可以让跨域请求
// 修改后 进行转发功能操作
axios.get('/react/api/header.json').then((res) => {
console.log(res)
})
//在开发环境的devServer配置项中添加proxy配置项
// 重点：proxy配置项只能再devServer这个环境下配置 如果再生产环境不可以配置这个
// proxy: {
// '/react/api': 'http://www.dell-lee.com' //当你请求的地址是/react/api路劲下的 它就会帮默认请求的是http://www.dell-lee.com这个服务器接口，然后就会到http://www.dell-lee.com网址下拿到对应内容，然后再以localhost:8080/react/api/header.json这个接口返回来我，做了一层数据的转发
// }
// 下面更复杂的配置
// proxy:{
// '/react/api':{
// target:'http://www.dell-lee.com', 首先也一样去如果路劲是/react/api就去http://www.dell-lee.com接口服务器拿数据
// pathRewrite:{
// 'header.json':'demo.json' 这个配置项就是可以转换请求的内容，本来是拿header.json的，可以改为拿demo.json,但是请求地址不用变
// }
// }
// }
// bypass配置项
// proxy: {
// '/react/api': {
// target: 'http://www.dell-lee.com',
// pathRewrite: {
// 'header.json': 'demo.json'
// },
// 这个还可以 做一些拦截操作
// bypass: function (req, res, proxyOptions) {就是说如果请求回来的是html 返回的就是html 不会返回数据给你，直接返回html放到页面中
// if (req.headers.accept.indexOf('html') !== -1) {
// console.log('Skipping proxy for browser request.');
// return '/index.html';
// }
// }
// changeOrigin:true 这个解决拿不到接口那边的内容 设置为true即可解决接口限制
// }
// },
// webapck 解决单页面应用问题
// 在devserver配置项下面添加 historyApiFallback: true
// 也可以有多项
// historyApiFallback: {
// rewrites: [{ 规则
// from: /^\/$/, 定义输入路劲
// to: '/views/landing.html' 对应现实from访问路劲内容
// },
// ]
// }
// 还有其他形式，看文档 不用写死的方式也有
// 这个只在本地有效。上线了的发服务器，必须得后端去apache 配置内容的devserver 添加historyApiFallback: true
// eslint 规范项目中的代码
// npm install eslint-loader --save-dev
// npm install eslint --save-dev
// npx eslint --init
// 选择第一项 Enter
// 选择第一项 Enter
// yes
// 选javascript
// yes
//npm install babel-eslint --save-dev
// 在最外层生成文件中的.eslintr.js文件中
// "parser":"babel-eslint" 添加到module.exports={} 中
// 在vscode eslint 安装插件
// use: ['ts-loader','eslint-loader'],
// 在配置文件中 配置添加项 overlay:true 一旦代码规范出现问题，他就会在命令工具弹出一个层提示哪行代码需要规范
// options: {
// fix:true //设置为true 可以自动的把小部分的代码不规范自动修改
// }
// {
// test: /\.tsx?$/,
// use: ['ts-loader',{
// loader:'eslint-loader',
// options:{
// fix:true
// },
// force:'pre' //不管顺序如何 都先强制执行eslint-loader
// }],
// exclude: /node_modules/,
// }]
// },
// 提升webpack 打包速度
// 升级打包工具
// 在打包文件的时候可以用exclude include 约束
// exclude: /node_modules/, 这个是排出node_modules文件夹下的所有文件 不进行loader
// include: path.resolve(__dirname,'../src') 这个是指定src目录下才去使用某个loader
// 合理使用loader也可以提高loader模块的效率
// 尽量使用plugins官方的插件，尽可能的少使用
// resolve参数合理配置
// resolve:{
// extensions:['.js','.jsx ']
// }
// 使用 DllPlugin 提高打包速度 插件打包的优化使用
// 在build文件夹下面创建webpack.dll.js文件
const path = require('path');
const webpack = require('webpack')
module.exports = {
mode: 'production',
entry: {
vendors: ['loadsh'],
react: ['react', 'react-dom', ]
},
output: {
filename: '[name].dll.js',
path: path.resolve(__dirname, '../dll'),
library: '[name]' //暴露vendors library接收
},
plugins: [
new webpack.DllPlugin({ //生成需要用到的插件
name: '[name]', //名字
path: path.resolve(__dirname, '../dll/[name].manifest.json')
})
]
}
// 安装 npm install add-asset-htmk-webpack-plugin --save-dev
const AddAssetHtmlWebpackPlugin = require('add-asset-html-webpack-plugin'); //使用AddAssetHtmlWebpackPlugin
const fs = require('fs'); //引入js,拿到对应的文件，获取文件信息
const files = fs.readdirSync(path.resolve(__dirname, '../dll')); //读取到dll下面的文件
files.forEach(file => { //循环拿到生成的文件
if (/.*\.dll.js/.test(file)) { //如果以.dll.js结尾的放到下面
plugins.push(new AddAssetHtmlWebpackPlugin({
filepath: path.resolve(__dirname, '../dll', file)
}))
}
if (/.*\.manifest.json/.test(file)) { //如果以.manifest.json结尾的放到下面
plugins.push(new webpack.DllReferencePlugin({
filepath: path.resolve(__dirname, '../dll', file)
}))
}
return plugins;
})
// 控制包文件大小
// 实现多页面打包
// new HtmlWebpackPlugin({
// template: 'src/index.html', //生成页面
// filename: 'index.html' // 生成页面的名字
// chunks: ['runtime', 'vendors', 'main'] // chunks 配置作用是，多个页面引入不同的js文件 比如说这个页面引入的是main.js文件
// }),
// new HtmlWebpackPlugin({
// template: 'src/index.html', //生成页面
// filename: 'list.html' // 生成页面的名字
// chunks: ['runtime', 'vendors', 'list'] // 这个是引入list.js文件
// }),
// 入口文件
// entry:{
// main:'./src/index.js',
// list:'./src/list.js'
// }
//控制台打印信息 高亮显示 会有颜色标识
// npm install cli-highlight -g
原文链接：https://blog.csdn.net/weixin_42164539/article/details/93889982
本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。
还没有人抢沙发呢~