webpack
Jqlender
这个作者很懒,什么都没留下…
展开
-
webpack4.x安装的一些坑
webpack版本号是4.16.5bug1: ‘node_modules’ 不是内部或外部命令,也不是可运行的程序运行node_modules/.bin/webpack src/main.js dist/bundel.js 报错:’node_modules’ 不是内部或外部命令,也不是可运行的程序 换成node_modules.bin\webpack src\main.js dist...原创 2018-08-15 11:55:06 · 1844 阅读 · 0 评论 -
cross-env使用
cross-env是运行跨平台设置和使用环境变量的脚本大多数情况下,在windows平台下使用类似于: NODE_ENV=production的命令行指令会卡住,windows平台与POSIX在使用命令行时有许多区别(例如在POSIX,使用$ENV_VAR,在windows,使用%ENV_VAR%。。。)cross-env让这一切变得简单,不同平台使用唯一指令,无需担心跨平台问题npm安装方...原创 2019-05-31 09:53:55 · 2870 阅读 · 0 评论 -
webstorm小技巧
1.mac上按住command并且点击方法名可以瞬间找见方法源码按住command,点击writeFile2.webstorm快速输出console.log方法方法1."内容.log+Tab键"打印出console.log(内容)方法2.file–seting–Editor–Live Templates,找到右边的JavaScript,点击右边的“+”号,即可自己设置相关的快捷单词,如...原创 2018-11-19 19:08:35 · 444 阅读 · 0 评论 -
启动webpack失败 events.js:183 throw er; // Unhandled 'error' event
原因:之前的服务将端口占用了解决:换个端口号,比如:8081原创 2018-10-19 11:51:56 · 1525 阅读 · 0 评论 -
webpack4--提取css到单独文件并且压缩css
提取css到build/css目录下:mini-css-extract-plugin插件压缩css:optimize-css-assets-webpack-plugin’插件const MiniCssExtractPlugin = require("mini-css-extract-plugin");//提取css到单独文件的插件const OptimizeCssAssetsPlugin =...原创 2018-10-15 18:36:49 · 8797 阅读 · 0 评论 -
webpack4-- 处理html中引入的图片
<img src="./src/images/current_day_icon.png" alt=""> 配置 module: { rules: [{ test: /\.(png|jpg|gif)$/, use: [{原创 2018-10-15 17:00:39 · 5676 阅读 · 2 评论 -
webpack4打包html,html-webpack-plugin详解
打包html使用插件:html-webpack-plugin安装npm i --save-dev html-webpack-plugin配置文件const path = require("path");const HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = { entry: __dir...原创 2018-10-14 15:46:37 · 5628 阅读 · 0 评论 -
使用 webpack 4 和 Babel 构建 React 应用(2018)
安装和配置 webpack2.Babel的安装与配置BabelBabel其实是一个编译JavaScript的平台,Webpack loaders(加载器) 将某些内容作为输入并生成其他内容作为输出。 Babel其实是几个模块化的包,其核心功能位于称为babel-core的npm包中,webpack可以把其不同的包整合在一起使用,对于每一个你需要的功能或拓展,你都需要安装单独的包(用...原创 2018-08-21 10:12:56 · 691 阅读 · 0 评论 -
webpack4.x中使用postcss-loader和autoprefixer给css3样式添加浏览器兼容
当前我们在写css样式的时候总是要处理浏览器兼容问题,那就是加前缀问题,可是我们在开发的时候比如: 直接写个:.className{ display: flex;}想变成下面这种的.className{ display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: f...原创 2018-08-23 18:10:36 · 6113 阅读 · 0 评论 -
webpack4.x热更新,自动刷新
热更新webpack-dev-server就是一个基于node.js和webpack的小型服务器。安装webpack-dev-servernpm install webpack-dev-serve --save-dev配置webpack.config.js文件const webpack=require('webpack'); entry:__dirname+'/...原创 2018-08-16 22:25:20 · 10634 阅读 · 7 评论 -
React+webpack热更新配置
首先安照webpack4.x热更新配置在react项目中发现修改css文件可以热更新; 修改js文件不会热更新,报: Ignored an update to unaccepted module,The following modules couldn’t be hot updated: (They would need a full reload!)解决办法:在webpack的入口文...原创 2018-08-22 18:12:28 · 2281 阅读 · 1 评论 -
webpack4.x Loaders
在main.js中直接加require(‘./css/base.css’),然后打包会报错,是因为webpack不支持css文件类型,需要依赖loader。css-loader 处理css中路径引用等问题style-loader 动态把样式写入csssass-loader scss编译器less-loader less编译器postcss-loader scss再处理一、安装c...原创 2018-08-16 11:37:38 · 701 阅读 · 0 评论 -
webpack4.x开发环境配置
一、全局安装webpack//全局安装npm install webpack -g//安装到你的项目目录npm install --save-dev webpack二、安装webpack-cli如果你使用 webpack v4+ 版本,你还需要安装 webpack-cli或者webpack-command,否则webpack命令运行不了。//卸载本地安装的webpac...原创 2018-08-15 18:32:43 · 643 阅读 · 0 评论 -
webpack.DefinePlugin使用介绍
这个插件是用来定义全局变量的//webpack.config.jsvar webpack = require('webpack');var path = require('path');module.exports = { entry: { index: "./js/index.js" }, output: { path: "./d...原创 2019-08-06 17:40:11 · 11217 阅读 · 0 评论