webpack 相关

更多干货

Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件,减少了页面的请求

https://webpack.js.org/guides/getting-started/入门教程

webpack index.js -o  bundle.js

loader

转化ES6代码

简单来说,file-loader 就是将文件(由于一般是图片文件为主),在进行一些处理后(主要是处理文件名和路径),移动打包后的目录中。

cross-env简介

运行跨平台设置和使用环境变量的脚本

https://github.com/kentcdodds/cross-env

出现原因

  • 当您使用NODE_ENV =production, 来设置环境变量时,大多数Windows命令提示将会阻塞(报错)。 (异常是Windows上的Bash,它使用本机Bash。)同样,Windows和POSIX命令如何使用环境变量也有区别。 使用POSIX,您可以使用:$ ENV_VAR和使用%ENV_VAR%的Windows。

  • windows不支持NODE_ENV=development的设置方式。会报错

  • (cross-env)能够提供一个设置环境变量的scripts,让你能够以unix方式设置环境变量,然后在windows上也能兼容运行

npm install --save-dev cross-env


{
  "scripts": {
    "build": "cross-env NODE_ENV=production webpack --config build/webpack.config.js"
  }
}

NODE_ENV环境变量将由cross-env设置

webpack 拷贝插件copy-webpack-plugin

cnpm install --save-dev copy-webpack-plugin
// Plugins
var CopyWebpackPlugin = require('copy-webpack-plugin');
 
 
 plugins: [
 
new CopyWebpackPlugin([ // 复制插件
        { from: path.join(__dirname,'app/node/main.js'), to:  path.join(__dirname,'public/node/') }
      ])
]


mini-css-extract-plugin

https://github.com/webpack-contrib/mini-css-extract-plugin

将CSS提取为独立的文件的插件,对每个包含css的js文件都会创建一个CSS文件,支持按需加载css和sourceMap

uglifyjs-webpack-plugin

使用uglify-js进行js文件的压缩

https://github.com/webpack-contrib/uglifyjs-webpack-plugin

optimize-css-assets-webpack-plugin

压缩css文件

https://github.com/NMFR/optimize-css-assets-webpack-plugin

webpack-dev-server

https://github.com/webpack/webpack-dev-server

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值