• [技术干货] 【Webpack】搭建开发环境
    │── build│ │── base.js // 公共部分│ │── build.js│ └── dev.js│── config│ │── base.js // 基础配置│ │── css.js // css 配置│ │── HtmlWebpackPlugin.js // html 配置│ └── MiniCssExtractPlugin.js // 提取css│── public // 公共资源│ └── index.html // html 模版└── src // 开发目录 │── style │ └── index.css └── main.js // 主入口build/dev.jsconst config = require('./base')();const webpack = require('webpack');const chalk = require('chalk');const WebpackDevServer = require('webpack-dev-server');const port = 8080;const publicPath = '/common/';config.devServer .quiet(true) .hot(true) .https(false) .disableHostCheck(true) .publicPath(publicPath) .clientLogLevel('none');const compiler = webpack(config.toConfig());// 拿到 devServer 参数const chainDevServer = compiler.options.devServer;const server = new WebpackDevServer( compiler, Object.assign(chainDevServer, {}));['SIGINT', 'SIGTERM'].forEach(signal => { process.on(signal, () => { server.close(() => { process.exit(0); }); });});// 监听端口server.listen(port);new Promise(() => { compiler.hooks.done.tap('dev', stats => { const empty = ' '; const common = `App running at: - Local: http://127.0.0.1:${port}${publicPath}\n`; console.log(chalk.cyan('\n' + empty + common)); });});css 提取 loader 配置module.exports = (config, resolve) => { return (lang, test) => { const baseRule = config.module.rule(lang).test(test); const normalRule = baseRule.oneOf('normal'); applyLoaders(normalRule); function applyLoaders(rule) { rule .use('extract-css-loader') .loader(require('mini-css-extract-plugin').loader) .options({ publicPath: './' }); rule .use('css-loader') .loader('css-loader') .options({}); } };};css 提取插件 MiniCssExtractPluginconfig/MiniCssExtractPlugin.jsconst MiniCssExtractPlugin = require('mini-css-extract-plugin');module.exports = (config, resolve) => { return () => { config .oneOf('normal') .plugin('mini-css-extract') .use(MiniCssExtractPlugin); };};自动生成HTMLconfig/HtmlWebpackPlugin.jsconst HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = (config, resolve) => { return () => { config.plugin('html').use(HtmlWebpackPlugin, [ { template: 'public/index.html' } ]); };};测试 html 模板public/index.html<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>learn_webpack</title> <body></body></html>测试 css 模板src/style/index.css.test { width: 200px; height: 200px; color: red; background-color: orange;}完成以上的配置就可以在 webpack上写css 布局 html 当然配置 less lass 这些在以后的需要添加loader 和 插件都是可以完成对文件的解析。参考文章:一步步从零开始用 webpack 搭建一个大型项目
  • [技术干货] webpack 开发环境配置(入门)
    webpack.config.js文件配置问题:版本的问题一些相应的配置命令已经更改,报一些莫名其妙的错误(脑阔疼)。const {resolve} = require('path');const HtmlWebpackPlugin = require('html-webpack-plugin');const { options } = require('less');module.exports = { entry: './src/index.js', output:{ filename:'bulid.js', path:resolve(__dirname,'build') }, module:{ rules:[ { test: /\.less$/, use:['style-loader','css-loader','less-loader'] }, { //处理图片资源 //不能处理html文件 test:/\.(jpg|png|gif)$/, //使用一个loader //下载 url-loader file-loader loader:'url-loader', options:{ //图片大小小于8kb,就会被base64处理 //优点:减少请求数量(减轻服务器压力) //缺点:图片的体积就会越大(文件请求就会越慢) limit:8*1024, //因为url-loader默认使用es6模块化解析,而html0loader引入图片是commonjs //解析时会报错[Object Module] //解决:关闭url-loader的es6模块使用commonjs解析 esModule:false } }, { test:/\.html$/, //处理的是html文件的img图片(负责引入img,从而被url-loader进行处理) loader:'html-loader' } ] }, plugins:[ new HtmlWebpackPlugin({ template: './src/index.html'} ) ], mode:'development', //开发服务器devSever 用来自动化(自动编译,自动打开浏览器,自动刷新浏览器) //特点:只会在内存中编译打包,不会有任何输出 //启动devSever指令为npx webpack-dev-srver devServer:{ contentBase:resolve(__dirname,'build'), //编译的式运行后的代码==>如果编译的式编译生成的文件在 项目的根目录下(内存的方式存放) //启动gzip压缩 compress:true, //端口号 port:8010, open:true, //npx webpack server 执行 }}入门参考链接:webpack 入门到入土提升参考链接:webpack 提升
  • [技术干货] 入坑 webpack(一)
    webpack 刚接触基本上是一些基础的文件配置:细节的部分都在webpacl.config.js内/* 1、Commonjs规范 ==>在node中运行的 2、输出output 必须是绝对路劲 path:path.resolve 解析当前路相对路劲为绝对路劲 path:path.join(__dirname,'./dist') join 拼接路劲 __dirname 当前文件的跟文件路劲+'所定义的相对路劲'*/ const path = require('path') const HtmlWebpackPlugin = require('html-webpack-plugin') module.exports = { mode:'development', //默认为production(生产模式) 参数=>development(开发模式) 区别在于是否进行压缩打包 entry:'./src/js/index.js', output:{ path:path.resolve('./dist'), //输出文件的路劲(绝对路径) filename:'bundle.js' //输出文件名 ==>就是打包好了输出,让浏览器解析 }, devServer:{ open:true, port:8090, compress:true, // contentBase:'./src', hot:true, }, plugins:[ new HtmlWebpackPlugin({ filename:'index.html', //输出文件名 ==>切换至其他的文件名最终生成的也是内存中的文件 template:'./index.html', //模板文件 }), ], module:{ rules:[ { test:/\.css$/, // //webpack读取loader时,是从右到左的读取,会将css的文件交给最右(下)侧得loader处理 // //loader得执行顺序时链式调用 // //css-loader解析css文件,style-loader解析数据放在html渲染页面 use:['style-loader','css-loader',] }, { test:/\.less$/, // //webpack读取loader时,是从右到左的读取,会将css的文件交给最右(下)侧得loader处理 // //loader得执行顺序时链式调用 // 转换过程 less-loader 将less文件转化为css文件 style-loader解析css文件 css-loader进行渲染 use:['style-loader','css-loader','less-loader'] }, { test:/\.s(a|c)ss$/, use:['style-loader','css-loader','sass-loader'] }, { test:/\.(jpg|jpeg|png|bmp|gif)$/, use:{ loader:'url-loader', //url-loader 是基于file-loader 封装的所以俩个loader都需要下载 option:{ limit:3*1024, //这个参数去配置当图片资源内容小于3kb时就以base64的字符串的输出(减少服务器的请求) outputPath:'image', //输出文件路劲 =>输出在项目的根目录下=>直接保存文件名即可。 name:'[name]-[hash:6].[ext]', //name=>原文件名+hash:前6位 +默认扩展名 } } }, { test:/\.(woff|woff2|eot|svg|ttf)$/, use:['url-loader'] }, ] } }
  • [技术干货] webpack中import 引入 css 报错:【Module parse failed: Unexpected toke】
    我的基本配置:package.json{ "name": "test", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "buildcustom": "webpack --config webpack.custom.config.js", "build": "webpack", "dev": "webpack-dev-server" }, "author": "", "license": "ISC", "devDependencies": { "css-loader": "^5.2.7", "html-webpack-plugin": "^5.3.2", "style-loader": "^3.1.0", "webpack": "^5.44.0", "webpack-cli": "^3.3.12", "webpack-dev-server": "^3.11.2" }, "dependencies": {}webpack.config.js/* 1、Commonjs规范 ==>在node中运行的 2、输出output 必须是绝对路劲 path:path.resolve 解析当前路相对路劲为绝对路劲 path:path.join(__dirname,'./dist') join 拼接路劲 __dirname 当前文件的跟文件路劲+'所定义的相对路劲'*/ const path = require('path') const HtmlWebpackPlugin = require('html-webpack-plugin') module.exports = { mode:'development', //默认为production(生产模式) 参数=>development(开发模式) 区别在于是否进行压缩打包 entry:'./src/js/index.js', output:{ path:path.resolve('./dist'), //输出文件的路劲(绝对路径) filename:'bundle.js' //输出文件名 ==>就是打包好了输出,让浏览器解析 }, devServer:{ open:true, port:8090, compress:true, // contentBase:'./src', hot:true, }, plugins:[ new HtmlWebpackPlugin({ filename:'index.html', //输出文件名 ==>切换至其他的文件名最终生成的也是内存中的文件 template:'./index.html', //模板文件 }), ], module:{ rules:[ ] } }module 没有配置loader 但是在入口文件index.js设置了 style-loader,就可以实现js加载css,但是看老师搞得就是import "path' 当时看了很多文档最终得显示还是 找不到我得css文件............(都是学的少惹的祸)哈哈哈看到一个文档一行引入就解决了,不过还是存在疑问得先看看这个实现。//引入依赖文件 commonJs//requrie 的返回值import b from './a.js'//引入css文件// import '../css/a.css' ==>这个导入方式依然得显示import 'style-loader!css-loader!../css/a.css';function sayhello(){ console.log("hello webpack"+b.age)}sayhello()这个是index.js(入口文件) 引入得方式就是import 'style-loader!css-loader!../css/a.css';我的文件目录结构:报错截图:我现在也是很好奇,为什么老是得教程就可以直接使用import直接引入 css文件,在去config.js去配置参数==> 可能是版本的问题,自己对这个学习不是很深。有新的解决方式跪求大佬写解。 
  • [问题求助] We码小程序如何使用webpack实现静态图片替换
    如题,自定义配置的webpack无法实现静态图片替换,如何使用webpack实现静态图片替换。
  • [技术干货] 想了解Webpack,看这篇就够了
    1. 摘要Webpack是一种前端资源构建工具,一个静态模块打包器。在Webpack看来,前端的所有资源文件(js/json/css/img/less/…)都会作为模块处理,当Webpack处理应用程序时,它将根据模块的依赖关系进行静态分析,打包生成对应的静态资源。Webpack打包流程图如图1-1所示。图1-1 Webpack打包流程图2. Webpack五个核心概念2.1 Entry入口(Entry)指示Webpack以哪个文件作为入口起点分析构建内部依赖图并进行打包。2.2 Output输出(Output)指示Webpack打包后的资源bundles输出到哪里去,以及如何命名。2.3 LoaderLoader让Webpack能够去处理那些非JavaScript语言的文件,Webpack本身只能理解JavaScript。2.4 Plugins插件(Plugins)可以用于执行范围更广的任务,插件的范围包括从打包和压缩,一直到重新定义环境中的变量等。2.5 Mode模式(Mode)指示Webpack使用相应模式的配置。分为development和production两种模式,下面分别进行简述。development: 开发模式,能让代码本地运行的环境,会将process.env.NODE_ENV的值设为development,同时启用NamedChunksPlugin和NamedModulesPlugin插件;production: 生产模式,能让代码优化运行的环境,会将process.env.NODE_ENV的值设为production,同时启用FlagDependencyUsagePlugin、FlagIncludedChunksPlugin、ModuleConcatenationPlugin、NoEmitreplaceStringsPlugin、OccurrenceOrderPlugin、SideEffectsFlagPlugin和UglifyJsPlugin插件。3. Wbepack配置3.1 webpack.config.js文件webpack.config.js是webpack的配置文件,用来指示webpack工作,运行webpack指令时,会加载里面的配置,所有构建工具都是基于nodejs平台运行的,默认采用commonjs模块化。webpack.config.js基础配置如图3-1所示。图3-1 webpack.config.js基础配置3.2 devServer配置开发服务器(devServer)用来实现自动化(自动编译、自动打开浏览器、自动刷新浏览器),只会在内存中编译打包,不会有任何文件输出,本地安装webpack-dev-server后,通过npx webpack-dev-server命令启动devServer,核心代码如图3-2所示。图3-2 devServer配置核心代码3.3 打包html/样式/图片/其它资源打包不同的资源会使用不同的loader和插件,打包html/样式/图片/其它资源的流程如下所述。3.3.1 打包html资源1.下载html-webpack-plugin插件;2.引入html-webpack-plugin插件;3.使用html-webpack-plugin插件,并进行相应配置。3.3.2 打包样式资源不同的样式文件需要配置不同的loader1.下载loader;2.配置loader,css样式文件使用css-loader和style-loader,less文件使用less-loader、css-loader和style-loader。其中css-loader的作用是将css文件变成commonjs模块加载到js文件中,style-loader的作用是创建style标签,将js中的样式资源插入进去,添加到head中生效。3.3.3 打包图片资源1.下载url-loader,file-loader2.配置loader3.3.4 打包其它资源1.下载file-loader2. 配置loader,配置该loader作用于不为html/css/less/js的其他文件3.4 提取css成单独文件/css兼容性处理/压缩css3.4.1 提取css成单独文件样式文件打包后会默认和js文件一起输出,可以通过插件将打包后的css文件单独输出,流程如下所述。1.下载mini-css-extract-plugin插件2.引用该插件3.配置3.4.2 css兼容性处理1.下载postcss-loader和postcss-preset-env2.在package.json中browsetslist属性中分别对开发环境和生产环境进行兼容性配置,设置支持样式的浏览器版本3.通过postcss找到package.json中browserslist里面的配置,通过配置加载指定的css兼容性样式。3.4.3 压缩css1.下载optimize-css-assets-webpack-plugin插件2.引用该插件3.使用该插件3.5 js语法检查eslint/js兼容性处理/js压缩3.5.1 js语法检查eslint1.下载eslint-loader和eslint2.在package.json中的eslintConfig中进行配置3.配置eslint-loader,其中只需检测js文件并要排除第三方库,只检测自己写的源代码,同时可在options配置中设置fix:true,自动修复eslint的错误。3.5.2 js兼容性处理1.下载babel-loader、@babel/core、@babel/preset-env,通过@babel/preset-env做基本的js兼容性处理,然后通过corejs做前面无法实现的兼容性处理,并实现按需加载2. 配置loaderjs兼容性处理核心代码如图3-3所示图3-3 js兼容性处理核心代码3.5.3 js压缩mode设置为production生产环境时会自动压缩js代码。4. webpack性能优化可以从开发环境和生产环境分别对webpack进行性能优化。其中开发环境主要考虑从打包构建速度和代码调试两个方面进行优化,生产环境主要考虑从打包构建速度和代码运行性能这两个方面进行优化。下面简单介绍下开发环境上通过HMR提升构建速度。4.1 HMRHMR(热模块替换),作用是一个模块发生变化后,只会更新打包这一个模块而不是所有模块,通过在devServer中设置hot:true属性启动HMR功能。其中对于样式文件,可以使用HMR功能,因为style-loader内部实现了;对于js文件,默认不能使用HMR功能,解决方法:修改入口文件js代码,添加支持HMR功能的代码,另外HMR只能处理非入口js文件的其他文件,对入口文件并不能生效,因为一旦入口文件更新,入口文件引入的其他文件一定会被重新加载;对于html文件,默认不能使用HMR功能,同时会导致html文件不能热更新,解决方法:修改entry入口文件,将html文件引入,只能解决html文件不能热更新的问题。js文件支持HMR功能的核心代码如图4-1所示。图4-1 js文件支持HMR功能核心代码4.2 HMR效果在入口index.js文件中引入print.js文件,运行npx webpack-devserver后,页面如图4-2所示。4-2 初始页面修改print.js文件后,只会重新加载print.js文件,而不会重新加载index.js文件,HMR效果如图4-3所示。4-3 HMR效果图
  • [技术干货] 初识Webpack
    1. 摘要Webpack是一种前端资源构建工具,一个静态模块打包器。在Webpack看来,前端的所有资源文件(js/json/css/img/less/…)都会作为模块处理,当Webpack处理应用程序时,它将根据模块的依赖关系进行静态分析,打包生成对应的静态资源。Webpack打包流程图如图1-1所示。图1-1 Webpack打包流程图2. Webpack五个核心概念2.1 Entry入口(Entry)指示Webpack以哪个文件作为入口起点分析构建内部依赖图并进行打包。2.2 Output输出(Output)指示Webpack打包后的资源bundles输出到哪里去,以及如何命名。2.3 LoaderLoader让Webpack能够去处理那些非JavaScript语言的文件,Webpack本身只能理解JavaScript。2.4 Plugins插件(Plugins)可以用于执行范围更广的任务,插件的范围包括从打包和压缩,一直到重新定义环境中的变量等。2.5 Mode模式(Mode)指示Webpack使用相应模式的配置。分为development和production两种模式,下面分别进行简述。development: 开发模式,能让代码本地运行的环境,会将process.env.NODE_ENV的值设为development,同时启用NamedChunksPlugin和NamedModulesPlugin插件;production: 生产模式,能让代码优化运行的环境,会将process.env.NODE_ENV的值设为production,同时启用FlagDependencyUsagePlugin、FlagIncludedChunksPlugin、ModuleConcatenationPlugin、NoEmitOnErrorsPlugin、OccurrenceOrderPlugin、SideEffectsFlagPlugin和UglifyJsPlugin插件。3. Wbepack配置3.1 webpack.config.js文件webpack.config.js是webpack的配置文件,用来指示webpack工作,运行webpack指令时,会加载里面的配置,所有构建工具都是基于nodejs平台运行的,默认采用commonjs模块化。webpack.config.js基础配置如图3-1所示。图3-1 webpack.config.js基础配置3.2 devServer配置开发服务器(devServer)用来实现自动化(自动编译、自动打开浏览器、自动刷新浏览器),只会在内存中编译打包,不会有任何文件输出,本地安装webpack-dev-server后,通过npx webpack-dev-server命令启动devServer,核心代码如图3-2所示。图3-2 devServer配置核心代码3.3 打包html/样式/图片/其它资源打包不同的资源会使用不同的loader和插件,打包html/样式/图片/其它资源的流程如下所述。3.3.1 打包html资源1.下载html-webpack-plugin插件;2.引入html-webpack-plugin插件;3.使用html-webpack-plugin插件,并进行相应配置。3.3.2 打包样式资源不同的样式文件需要配置不同的loader1.下载loader;2.配置loader,css样式文件使用css-loader和style-loader,less文件使用less-loader、css-loader和style-loader。其中css-loader的作用是将css文件变成commonjs模块加载到js文件中,style-loader的作用是创建style标签,将js中的样式资源插入进去,添加到head中生效。3.3.3 打包图片资源1.下载url-loader,file-loader2.配置loader3.3.4 打包其它资源1.下载file-loader2. 配置loader,配置该loader作用于不为html/css/less/js的其他文件3.4 提取css成单独文件/css兼容性处理/压缩css3.4.1  提取css成单独文件样式文件打包后会默认和js文件一起输出,可以通过插件将打包后的css文件单独输出,流程如下所述。1.下载mini-css-extract-plugin插件2.引用该插件3.配置3.4.2 css兼容性处理1.下载postcss-loader和postcss-preset-env2.在package.json中browsetslist属性中分别对开发环境和生产环境进行兼容性配置,设置支持样式的浏览器版本3.通过postcss找到package.json中browserslist里面的配置,通过配置加载指定的css兼容性样式。3.4.3 压缩css1.下载optimize-css-assets-webpack-plugin插件2.引用该插件3.使用该插件3.5 js语法检查eslint/js兼容性处理/js压缩3.5.1 js语法检查eslint1.下载eslint-loader和eslint2.在package.json中的eslintConfig中进行配置3.配置eslint-loader,其中只需检测js文件并要排除第三方库,只检测自己写的源代码,同时可在options配置中设置fix:true,自动修复eslint的错误。3.5.2 js兼容性处理    1.下载babel-loader、@babel/core、@babel/preset-env,通过@babel/preset-env做基本的js兼容性处理,然后通过corejs做前面无法实现的兼容性处理,并实现按需加载    2. 配置loaderjs兼容性处理核心代码如图3-3所示图3-3 js兼容性处理核心代码3.5.3 js压缩mode设置为production生产环境时会自动压缩js代码。4. webpack性能优化可以从开发环境和生产环境分别对webpack进行性能优化。其中开发环境主要考虑从打包构建速度和代码调试两个方面进行优化,生产环境主要考虑从打包构建速度和代码运行性能这两个方面进行优化。下面简单介绍下开发环境上通过HMR提升构建速度。4.1 HMR    HMR(热模块替换),作用是一个模块发生变化后,只会更新打包这一个模块而不是所有模块,通过在devServer中设置hot:true属性启动HMR功能。其中对于样式文件,可以使用HMR功能,因为style-loader内部实现了;对于js文件,默认不能使用HMR功能,解决方法:修改入口文件js代码,添加支持HMR功能的代码,另外HMR只能处理非入口js文件的其他文件,对入口文件并不能生效,因为一旦入口文件更新,入口文件引入的其他文件一定会被重新加载;对于html文件,默认不能使用HMR功能,同时会导致html文件不能热更新,解决方法:修改entry入口文件,将html文件引入,只能解决html文件不能热更新的问题。js文件支持HMR功能的核心代码如图4-1所示。图4-1 js文件支持HMR功能核心代码4.2  HMR效果在入口index.js文件中引入print.js文件,运行npx webpack-devserver后,页面如图4-2所示。4-2 初始页面修改print.js文件后,只会重新加载print.js文件,而不会重新加载index.js文件,HMR效果如图4-3所示。4-3 HMR效果图
  • [问题求助] react模板不提供适配方案吗?自己适配webpack的配置在哪进行配置啊
    我想自己提供适配方案,需要在哪里进行webpack的配置呢?还有,不打算模板提供一下配置吗?