webpack
碵蝎
这个作者很懒,什么都没留下…
展开
-
12、区分开发环境和生产环境
开发环境和生产环境的构建目标差异很大。在开发环境中,我们需要强大的、具有实时重新加载或热模块替换能力和本地服务器。而在生产环境中,我们目标则转向于关注更小的包,以及资源的优化,以改善加载时间。所以我们通常建议每个环境编写独立的webpack配置。现在我们把下面的webpack配置分别写在3个文件上const path = require('path');const webpack = require('webpack');const HtmlWebpackPlugin = require('h原创 2020-06-04 00:12:08 · 3331 阅读 · 0 评论 -
11、模块热替换(HMR)
模块热替换 :当修改一个js或者css的时候,只刷新修改的内容,不进行整个页面的刷新。1、若本地服务器是使用webpack-dev-server的,则把hot : true 加上devServer : { contentBase : './dist', host : 'localhost', port : 8080, open : true, hot : true, //这里 }2、配置2个插件plugins:[ new webp原创 2020-06-02 19:05:08 · 401 阅读 · 0 评论 -
07、CleanWebpackPlugin
若打包的js文件我们设置了hash值,如 :output : { path : path.resolve(__dirname, 'dist'), filename : 'js/index[hash].js' //有hash值的js}则每次打包后,之前的js文件未被删除。又或者我们修改了打包后的图片文件夹的名字,在进行一次打包,旧的文件夹也不会被删除。这时候我们就要手动删除打包的文件,然后在进行一次打包。这挺麻烦,CleanWebpackPlugin这个插件就是帮助我们删除原创 2020-05-27 20:05:36 · 154 阅读 · 0 评论 -
04、编译less、sass
sass和less类似,这里以less为例1、安装less-loadercnpm i less-loader -S2、配置webpack.config.jsmodule:{ rules : [{ test : /\.less$/, //匹配以.less结尾的文件,匹配到的文件将用下面的loader use : ['style-loader','css-loader', 'less-loader'] }]}...原创 2020-05-27 00:25:04 · 167 阅读 · 0 评论 -
10、提取css
之前我们打包的css文件,会在打包出来的js文件里面。现在使用mini-css-extract-plugin这个插件可以单独把css文件分离出来1、安装插件cnpm i mini-css-extract-plugin2、rules配置{ test : /\.css$/, use : [MiniCssExtractPlugin.loader, 'css-loade...原创 2020-04-08 18:59:30 · 256 阅读 · 0 评论 -
09、生产html模板
1、安装html-webpack-plugin插件cnpm i html-webpack-plugin2、配置const path = require('path');const HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = { entry : './src/main.js',...原创 2020-04-08 18:21:28 · 187 阅读 · 0 评论 -
08、es6转es5
1、安装如下插件cnpm i babel-loader @babel/core @babel/preset-env2、配置const path = require('path');const webpack = require('webpack');module.exports = { entry : './src/main.js', output : { ...原创 2020-04-08 17:48:54 · 253 阅读 · 0 评论 -
06、文件处理
文件处理包括图片处理、字体文件处理、以及第三方js文件处理(比如jquery)图片处理1、安装file-loadercnpm i file-loader2、配置rules{ test : /\.(png|jpg|gif|jpeg)$/, use : 'file-loader'}...原创 2020-04-08 16:24:31 · 176 阅读 · 0 评论 -
05、添加css3浏览器前缀
1. 安装postcss-loader autoprefixer2. 在webpack.config.js中配置const path = require('path');module.exports = { entry : './src/index.js', output : { path : path.resolve(__dirname, 'dis...原创 2020-04-06 00:51:36 · 237 阅读 · 0 评论 -
03、打包css文件
1. 安装style-loader和css-loader2. 在webpack.config.js中配置const path = require('path');module.exports = { entry : './src/index.js', output : { path : path.resolve(__dirname, 'dist'),...原创 2020-04-06 00:21:27 · 161 阅读 · 0 评论 -
02.、本地服务器
若项目中有webpack.config.js这个文件,则打包的时候webpack则会按照这个文件的配置进行打包。1. 创建webpack.config.js2. 编写以下代码 :const path = require('path'); //用于读写文件操作module.exports = { entry : './src/index.js', //入口文件 ou...原创 2020-04-05 20:24:07 · 270 阅读 · 0 评论 -
01、webpack简介
1. 安装node2. npm init 创建package.json文件3. 安装webpack webpack-cil依赖包4. webpack的默认入口entry是src/index.js和默认出口output是dist/main.js,所以我们现在需要创建一个index.js,如下图 :然后在index.js文件上随便写点东西5. 配置打包命令,webpack的...原创 2020-04-05 20:05:04 · 297 阅读 · 0 评论