webpack4.x 各项简单配置
1.webpacks是什么?
是模块打包机,分析目录结构,找到js模块(包括了浏览器不能直接识别的代码如,typescript、sass),打包成合适的格式,供游览器访问。
优势:模块打包,和构建项目
打包的优势:
- 1.模块化,拆分了业务的复杂的js代码
- 2.js扩展了==》基于原型==》基于class(typescript,es6)
面试:webpack、grunt、gulp不同:grunt、gulp优化流程的工具,webpack模块化支持工具,兼有优化流程功能
2.webpack4.x安装
- 1.先全局安装 npm install webpack -g ;npm install webpack-cli -g
- 2.再npm init 生成package.json
- 3.局部安装
npm install webpack -S
npm install webpack-cli S - 4.webpack –mode production(生产环境)
webpack –mode development(开发环境)
3.配置
1.webpack四个核心概念
入口(entry)
输出(output)
loader:
webpack支持js,不支持css和html,让webpack支持,则需要loader 而palugins可以有效打包或压缩css,js,html,图片。
插件(plugins)
[默认配置
sr
index.js
dist
main.js]2.配置文件
1.DevServe
r
扫描二维码关注公众号,回复:
1372205 查看本文章
首先是安装devserver:npm install webpack-dev-server -D;
然后在webpack.config.js中配置
devServer:{
contentBase:"./public",//选择服务器路径,即服务器根目录选择
host:'localhost',//服务器地址
port:"3000",//端口
inline:true//实时刷新
}
2.在package.json
配置:
“scripts”: {
"start": "webpack-dev-server --open"//webpack-dev-server --open --inline(这个也是可以的,做到实时刷新)
},
3.loader:加载程序
1.引入css需要
style-loader css-loader 安装:npm install style-loader css-loader -D(s); 同时css若有图片加载,光有style-loader,和css-loader还不行,还需要有file-loader file-loader安装:install file-loader -D 2.loader配置 module: { rules: [ { test: /\.css$/, use:['style-loader','css-loader'] },//正则,表示后缀为css的文件 { test: /(\.jpg|\.png|\.jpeg|\.gif)$/, use:['file-loader']}//同理...... ] } 3.html-withimg-loader 使得打包的html支持图片 安装:npm install html-withimg-loader -D(S); 配置:{test:/\.html$/,use:'html-withimg-loader'} 4.字体图标 使用的是file-loader 配置:{test: /\.(woff|ttf|svg|eot|xttf|woff5)$/, use:'file-loader?limit=1024&name=./fonts/[name].[ext]'}//后面的参数,limit是限制文件大小,name是指定打包到哪个文件,同时指明打包文件名字,类型
4.插件
html-webpack-plugin
src:一般是开发阶段
public:一般是生产阶段[一般这2个阶段文件要对应]
1.安装 html-webpack-plugin 安装命令:npm install html-webpack-plugin -D(S) 2.配置html-webpack-plugin 第一步:引入html-webpack-plugin== >const HtmlWebpackPlugin = require('html-webpack-plugin'); 第二步:配置 plugins: [ //new webpack.optimize.UglifyJsPlugin(), new HtmlWebpackPlugin({ template: './src/index.html', filename: 'a.html'//改html的输出文件名index.html改为了a.hmtl, minify:{ removeAttributeQuotes:true,//去除引号 removeComments:true//去除注释 removeEmptyAttributes:true//去除空属性 collapseWhitespace:true//去除空格 } }) ]
5.css提取
插件下载:npm intall extract-text-webpack-plugin@next -D(s); const ExtractTextPlugin=require("extract-text-webpack-plugin") 配置 new ExtractTextPlugin('./css/[name].css'); 同时要对style-loader和css.loader进行改造==> module: { rules: [ { test: /\.css$/, use:ExtractTextPlugin.extract({ fallback:'style-loader', use:[{ loader:'css-loader?name=./css/[name].[ext]', options:{ minimize:true,//代码压缩 } }], publicPath;"../" })}, ] },
6.babel
核心:babel-core 功能:babel-loader babel-preset-env babel-preset-react 安装:npm install babel-core babel-loader babel-preset-env babel-preset-react -S 配置(一): { test:/\.(jsx|js)$/, use:{ loader:'babel-loader', options:{ presets:['env','react'] } }, exclude:/node_modules/ //排除不编译node_modules文件 } 配置(二): 在根目录下建一个.babelrc文件 再在其文件中写人{"presets":['env','react']} 在webpack.config.js下写入: { test:/\.(jsx|js)$/, use:{ loader:'babel-loader' }, exclude:/node_modules/ //排除不编译node_modules文件 }
7.引入第三方文件
在4.0中极大简化了配置。 (1)安装jq:npm install jquery -D (2)在入口js文件 import $ from 'jquery';即可,非常简单