webpack4 入门配置研究
1. 全局安装 npm install webpack webpack-cli webpack-dev-server -g
1.1)输密文的密码(电脑开机)
1.2)安装成功
2. 输入命令mkdir config dist src创建三个文件夹
3.输入命令npm init -y
4. 输入命令touch dist/index.html src/index.js分别dist和src文件夹下面创建一个index.html文件和index.js文件
5. webpack4.x中打包默认找src/index.js作为默认入口,可以直接在终端中输入命令webpack 将当前的内容进行一个简单的打包
5.1) 应该看到打包的时候终端中会出现黄色的警告提示
5.2)mode是webpack中独有的,有两种打包环境,一个是开发环境:development另外一个是生产环境:production
打包的时候输入webpack --mode=development或者webpack --mode=production就不会出现警告提示了
5.3)webapck --mode=production命令打包,这个是代码压缩过的,同时项目文件夹下面多了 一个node_modules文件夹
6.输入命令touch config/webpack.dev.js创建文件
7. 输入命令rm dist/main.js src/index.js移除掉这两个文件我们自己来配置
7.1) 现在在src文件夹下面创建main.js文件
7.2)进入到webpack.dev.js文件中进行配置,具体在代码中注释
7.3) 现在不能执行之前的webpack --mode="development"命令了会报下面的错误没有放在src文件夹内;这里是因为webpack4打包默认找的src下面的index.js入口,我们前面已经删除了,这里src下面死main.js文件,所以找不到就报ERROR in Entry module not found: Error: Can't resolve './src' in '/Users/yubo/Desktop/www/study_webpack2'错误,所以这里我们到packsge.json里面配置下命令,让打包的时候执行我们在config/webpack.dev.js下面配置的入口。
启动配置
8.npm run build 就可以了;
简单配置 webpack.dev.js
module.exports = {
entry: ['./src/okcPages/okMainIndex.js', './src/units/remChange.js','./src/okcPages/initCp.js'],
output: {
publicPath: '/', //这里要放的是静态资源CDN的地址
path: path.resolve(__dirname, 'dist'),
filename: 'build.js' // 单文件输出 ,如果多文件可在 entry :{} ,这里 filename: '[name].js'
},
resolve: {
extensions: [".js", ".css", ".json"],
alias: {
// jquery: './src/units/jquery-1.83.min.js',
} //配置别名可以加快webpack查找模块的速度
},
externals: {
jquery: 'window.$'
},
module: {
// 多个loader是有顺序要求的,从右往左写,因为转换的时候是从右往左转换的
rules: [
{
test: /.css$/,
use: ExtractTextWebapckPlugin.extract({
fallback: 'style-loader',
use: ['css-loader'] // 不再需要style-loader放到html文件内
}),
include: path.join(__dirname, 'src'), //限制范围,提高打包速度
exclude: /node_modules/
},
{
test: /.jsx?$/,
use: {
loader: 'babel-loader',
query: { //同时可以把babel配置写到根目录下的.babelrc中
presets: ['env', 'stage-0'] // env转换es6 stage-0转es7
}
}
},
{ //file-loader 解决css等文件中引入图片路径的问题
// url-loader 当图片较小的时候会把图片BASE64编码,大于limit参数的时候还是使用file-loader 进行拷贝
test: /.(png|jpg|jpeg|gif|svg)/,
use: {
loader: 'url-loader',
options: {
outputPath: 'images/', // 图片输出的路径
limit: 1 * 1024
}
}
}
]
},
plugins: [
// 多入口的html文件用chunks这个参数来区分
/* new HtmlWebpackPlugin({
template: path.resolve(__dirname, 'src', 'index.html'),
filename: 'index.html',
hash: true,//防止缓存
minify: {
removeAttributeQuotes: true//压缩 去掉引号
}
}),*/
new ExtractTextWebapckPlugin('css/build.css'), // 其实这个特性只用于打包生产环境,测试环境这样设置会影响HMR
// new CleanWebpackPlugin([path.join(__dirname, 'dist')]),
],
devtool: 'eval-source-map', // 指定加source-map的方式
devServer: {
contentBase: path.join(__dirname, "dist"), //静态文件根目录
port: 3824, // 端口
host: 'localhost',
overlay: true,
compress: false // 服务器返回浏览器的时候是否启动gzip压缩
},
watch: true, // 开启监听文件更改,自动刷新
watchOptions: {
ignored: /node_modules/, //忽略不用监听变更的目录
aggregateTimeout: 500, //防止重复保存频繁重新编译,500毫米内重复保存不打包
poll: 1000 //每秒询问的文件变更的次数
},
配置js压缩
uglifyjs-webpack-plugin(JS压缩插件,简称uglify) webpack4 已经集成;
const uglify = require('uglifyjs-webpack-plugin');
plugins:[
new uglify()
],
这个时候我们再终端运行命令 npm run bulid 进行打包会提示下载webpack-cli 命令输入yes
webpack都有哪些插件?
1.)html生成插件: html-webpack-plugin
2.)css分离的插件:extract-text-webpack-plugin new extractTextPlugin("css/index.css") //这里的/css/index.css 是分离后的路径
3.)处理HTML中的图片:html-withimg-loader
4.)自动处理CSS3属性前缀:postcss-loader 和 autoprefixer
5.)消除未使用的css 和js: purify-css purifycss-webpack
6.)copy 插件 :copy-webpack-plugin
7.)编译输出文件前,删除旧文件: clean-webpack-plugin
8.) 压缩css,优化css结构,利于网页加载和渲染 : optimize-css-assets-webpack-plugin
9.) 打包编译时,显示进度条: progress-bar-webpack-plugin
10.) 规范scss, less,css书写规则:stylelint-webpack-plugin
11.) 将CSS解压到单独的文件中。它为每个包含CSS的JS文件创建一个CSS文件:webpack4用mini-css-extract-plugin 代替了 extract-text-webpack-plugin
12.)减少构建时间:webpack-parallel-uglify-plugin
13.)加快编译速度:happypack
14.)资源路径与问件名对应:assets-webpack-plugin
参考原文:https://segmentfault.com/a/1190000015355816 ;
1.路径问题
var website ={
publicPath:"http://localhost:8888/"
// publicPath:"http://192.168.1.103:8888/"
}
声明一个变量查找更快 publicPath:website.publicPath 使用webpack命令进行打包,你会发现原来的相对路径改为了绝对路径
2. 处理HTML中的图片
在webpack中是不喜欢你使用标签来引入图片的,但是我们作前端的人特别热衷于这种写法,国人也为此开发了一个:html-withimg-loader。他可以很好的处理我们在html 中引入图片的问题,如何把图片放到指定的文件夹下html-withimg-loader;
npm install html-withimg-loader --save-dev
{
test: /.(htm|html)$/i,
use:[ 'html-withimg-loader']
}
3.)自动处理CSS3属性前缀:postcss-loader 和 autoprefixer
postCSS推荐在项目根目录(和webpack.config.js同级),建立一个postcss.config.js文件。
module.exports={
plugins: [
require('autoprefixer') //自动添加前缀插件
]
}
在webpack.dev.cnfig.js中配置:
{
test:/.css$/,
use: extractTextPlugin.extract({
fallback: "style-loader",
use:[{loader:"css-loader"},
{
loader:"postcss-loader",
},
]
})
},
4.消除未使用的CSS 安装PurifyCSS-webpack
PurifyCSS-webpack要依赖于purify-css这个包,所以两个都要下载
npm install purifycss-webpack purify-css --save-dev
因为我们需要同步检查html模板,所以我们需要引入node的glob对象使用。在webpack.dev.config.js文件头部引入glob
const glob = require('glob');
const PurifyCSSPlugin = require("purifycss-webpack");
new PurifyCSSPlugin({
//这里配置了一个paths,主要是需找html模板,purifycss根据这个配置会遍历你的文件,查找哪些css被使用了。
paths: glob.sync(path.join(__dirname, 'src/*.html')),
}),
注意: 使用这个插件必须配合extract-text-webpack-plugin这个插件
5)webpack bable 的配置;
npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react
//babel 配置
{
test:/.(jsx|js)$/,
use:{
loader:'babel-loader',
options:{
presets:[
"es2015","react"
]
}
},
exclude:/node_modules/
}
5.1)一般是写到.babelrc 文件夹里
{
"presets": [
["env", {
"modules": false,
"targets": {
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
}
}],
"stage-0"
]
}
5.2)对比.webpack.dev.config.js里的loader配置
babel 配置
{
test:/.(jsx|js)$/,
use:{
loader:'babel-loader',
},
exclude:/node_modules/
}
参考原文:简书(素时年锦 )webpack4.x入门配置
转载于:https://www.cnblogs.com/panax/p/9314396.html
webpack4 入门配置研究相关推荐
- Nginx安全配置研究
Nginx安全配置研究 zhangsan · 2014/03/28 10:39 0x00 测试环境 操作系统:CentOS6.5 Web服务器:Nginx1.4.6 Php版本:Php5.4.26 0 ...
- IIS7.5 安全配置研究(推荐)
这篇文章主要介绍了IIS7.5 安全配置研究(推荐),需要的朋友可以参考下 操作系统:Windows Server 2008 R2 Enterprise Service Pack 1 x64 IIS版 ...
- webpack4.0配置记录(2)
接上一篇webpack4.0配置记录(1),继续记录学习webpack配置. 定义环境变量 new Webpack.DefinePlugin({//用来定义全局环境变量DEV:JSON.stringi ...
- 入门学术研究和学术论文
入门学术研究和学术论文 入门学术论文和学术研究 Thesis和Paper 研究工作的基本流程 论文的基本框架 Abstract Introduction Related work Method Exp ...
- 创客基地oDrive第一课 入门配置
淘宝套装链接 B站视频链接 *** 特别注意 *** 请勿带电拔插主板上的所有接口接线,特别是USB接口. 请勿带电拔插主板上的所有接口接线,特别是USB接口. 请勿带电拔插主板上的所有接口接线,特别 ...
- 交换机的入门配置实验
交换机的入门配置实验 提示:建议先了解计算机网络的网络层再接着看! 1 实验目的: 掌握交换机命令行各种操作模式的区别,以及模式之间的切换: 掌握交换机的全局的基本配置: 掌握交换机端口的常用配置参数 ...
- webpack4+react配置多页面移动端应用程序
webpack4+react配置多页面移动端应用程序 前言 技术栈 项目目录结构 移动端适配方案 webpack配置 基础配置 开发环境配置 react+redux热重载 生产环境配置 .babelr ...
- Oauth2 resource server入门配置
Oauth2.0资源服务器配置 上一节:OAuth2.0 Authorization Server入门配置 pom.xml <dependencies><dependency> ...
- CEPH集群操作入门--配置
https://www.cnblogs.com/luxiaodai/p/10006036.ht CEPH集群操作入门--配置l CEPH集群操作入门--配置 阅读目录(Content) 概述 配置 存 ...
最新文章
- html wbr标签,HTML wbr标签
- 商丘网络推广浅析如何分析竞争对手的网站,制定更优秀的优化方案?
- 新思路保障网络安全 基于平台的网络安全架构体系
- java 23种设计模式及具体例子 收藏有时间慢慢看
- Nginx负载均衡的原理及流程分析
- java xlsx怎么转换成excel格式_python小工具 | Excel的xls和xlsx格式文件转换
- vss登录invalid handle问题的解决办法
- utilities(matlab)—— PSNR 值的计算
- 洞悉物联网发展1000问之可穿戴设备的未来会怎样?
- Android判断是否使用MediaCodec硬解码(十二)
- 百度AI输入法发布全感官输入2.0版本,语音技术取得世界级突破...
- 入门力扣自学笔记96 C++ (题目编号749)
- Java案例:功夫熊猫
- spark3.0-spark入门-总结知识要点
- 设置部署服务器的运行端口,以太坊swarm配置bzz运行常见问题解决方案
- Python学习笔记---day06数据类型(中)
- android qq 功能,Android-类qq功能(一)
- pip‘s dependency resolver does not currently take into account 解决办法
- 20220904小红书笔试
- SpringBoot 优雅地对接口进行数据加解密