webpack 干货总结
一、概述:
webpack 是一个模块打包工具!
官网地址
官方文档查阅技巧:
concepts:概念
configuration:配置项
loaders:官方相关loader
guides:指南
1. npm
使用npm(node包管理工具)创建一个符合node规范的项目,生成包管理文件package.json
npm init
注:要想用webpack打包项目,项目结构要符合node规范
2. 安装webpack
注:webpack-cli提供可以在命令行使用webpack命令的功能
全局安装:npm install webpack webpack-cli -g(不推荐)
全局卸载:npm uninstall webpack webpack-cli -g
项目内安装:npm install webpack webpack-cli --save--dev(或者-D)(推荐)
安装指定版本:webpack:npm install webpack@4.16.5 webpack-cli --D
查看安装webpack版本: webpack -v
3. 查看webpack相关版本信息
npm info webpack
4. webpack命令
使用webpack对index.js进行模块化打包(npx可以执行当前项目安装的webpack,就跟全局安装的webpack那样)
npx webpack index.js
5. 模块导入导出
ES Module 规范:
- 模块导出:export default Header;
- 模块导入:import Header from './header.js';
CommonJS 规范:
- 模块导出:module.export = Header;
- 模块导入:var Header = require(‘./header.js')
6. webpack配置文件
默认配置文件webpack.config.js
webpack打包时指定配置文件:npx webpack --config webpack.config.js
//引入Node.js中path核心模块
const path = require('path');
module.export = {
// mode:'development',//默认production
// entry: './src/index.js'
entry: {
// 入口文件名默认main,可以不指定
main:'./src/index.js'
},
output: {
filename:'bundle.js',
// __dirname表示其所属文件(webpack.config.js)的绝对路径
path: path.resolve(__dirname, 'dist')
}
}
7. eslint
安装:npm install eslint --save-dev
生成配置文件:npx eslint --init
.eslintrc.js
8. 示例
const path = require('path'); //引入Node.js中path核心模块
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const webpack = require('webpack');
module.export = {
mode:'development',//默认production(会压缩文件)
// 推荐 development: 'cheap-module-eval-source-map'
// 推荐 production: 'cheap-module-source-map'
// source-map 用来维护打包前源js文件和打包后bundle.js文件的代码位置映射关系,这样当js文件
// 报错时可以直接索引到源js文件中的代码位置
// source-map 不加任何前缀,会生成一个map映射文件;
// inline:把映射关系嵌入到生成的bundle.js文件中
// cheap:精确到行,效率较高
// module:包含除了业务代码以外的js库文件;
// eval:适合小型项目,速度最快,生产中不用
devtool: 'cheap-module-eval-source-map',
// entry: './src/index.js'
entry: {
main: './src/index.js', // 入口文件名默认main,可以不指定
// sub: './src/index.js'// 可以指定多个入口文件, 即可以根据多个文件去打包
},
// 更多内容参考:https://webpack.js.org/configuration/dev-server
// devServer会把打包后生成的文件放到内存中,提高打包效率!
// 后端服务URL:http://www.dell-lee.com/react/api/header.json;
// http://www.dell-lee.com/react/api/demo.json
devServer: {
overlay: true,// 当不符合eslint规范时,浏览器弹出悬浮层显示
host: '127.0.0.1',
port: 8080,
contentPath: './dist',// 发布内容到devServer的目录,类似于tomcat的webapp目录
open: true,// 服务器启动后是否自动打开浏览器
// 更多内容参考:https://webpack.js.org/configuration/dev-server#devserverproxy
proxy: {
'/react/api/': {
// 当请求/react/api/*时,把请求代理到http://www.dell-lee.com上,
// 即访问http://www.dell-lee.com/react/api/*
target: 'http://www.dell-lee.com/',
secure: false,// 绕过https的认证限制
pathRewrite: {
'header.json': 'demo.json'// 实现路径重写(重定向)
},
// 可以突破一些网站对于爬虫等操作的限制,通常把该选项一直加上
changeOrgin: true,
// 指定http请求头
headers: {
host: 'www.dell-lee.com'
}
}
},
// https://webpack.js.org/concepts/hot-module-replacement/
// 开启 Hot Module Replacement功能,HMR会保持应用的状态,并且保证只加载修改的地方,
// 不会全局加载js文件,提高开发效率!
hot: true,
hotOnly: true// 保证即使HMR不生效也不刷新浏览器
},
// loader用来扩展webpack的功能,类似于maven的dependency
module: {
// babel用来解析ES6语法
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
options: {
presets: [['@babel/preset-env',{
// 参考:https://babeljs.io/docs/en/babel-polyfill
// npm install --save @babel/polyfill;
// 为了使用ES6中的一些内建库(like Promise or WeakMap,
// staticmethods like Array.from or Object.assign)
// @babel/polyfill可以把这些内建库函数转换成低版本浏览器识别的js语法,
// useBuiltIns: 'usage' 实现按需引入。
userBuiltIns: 'usage'
}]]
}
},
{
test: /\.(jpg|png|gif)$/,
use: {
// loader: 'file-loader',
// 和file-loader 唯一的区别就是包含limit选项,通过设置limit值限定当大小
// 不超过limit时,把资源转换成base64直接嵌入到js文件中。
loader: 'url-loader',
options: {
name: '[name]_[hash].[ext]',// 指定打包后的文件名格式
outputPath: 'images/',// 指定打包后文件目录
limit: 10240
}
}
},
{
test: /\.scss$/,
use: {
loader: [
'style-loader', // 在index.html中head区域嵌入style样式
// 'css-loader', // 解决css文件之间的依赖关系
{
loader: 'css-loader',
options: {
// 在sass文件中也可以引入sass文件,这样顺序执行到sass文件中
// 引入另一个sass文件的代码行时,
// 也可以重新执行之前已经加载过的loader
importLoaders: 2,
// 可以使用import style from './index.sass' 使样式在局部文件中有效
module: true
}
},
'sass-loader', // 解析sass预处理语法
'postcss-loader' // 会处理transform等css3标签的浏览器兼容问题,比如样式属性加上-webkit
]
}
},
{
test: /\.css$/,
use: {
loader: [
'style-loader',
'css-loader',
'postcss-loader'
]
}
}
]
},
// plugin用来影响webpack打包生命周期的功能,类似于maven的plugin
plugins: [
// 可以自动生成index.html文件,并把打包生成的js文件引入到index.html文件中
new HtmlWebpackPlugin({
template: 'src/index.html'// 指定生成的index.html文件使用的html模板
}),
// 打包之前会先清除指定的目录
new CleanWebpackPlugin(['dist']),
// HMR
new webpack.HotModuleReplacementPlugin()
],
output: {
filename: 'bundle.js',
// filename: '[name].js'// name为入口文件的key值,即main以及sub
// publicPath: 'http://csn.com.cn',// 指定index.html中引入main.js以及sub.js时加上的url前缀
// _dirname表示其所在文件(这里为webpack.config.js)的绝对路径
path: path.resolve(_dirname, 'dist')
}
};