webpack4学习笔记根据Dell Lee老师的课程整理
webpack的安装和入口配置
傻瓜式安装node
查看node -v检查是否成功
全局安装webpack：npm install webpack webpack-cli -g
最好不要全局安装，否则多项目不能兼容。
项目内安装:npm install webpack webpack-cli -D
查看项目内webpack版本代码npx webpack -v
npx会在当前项目目录下的node_modules找webpack
npx代替npm实现项目内安装使用
查看可安装的所有版本npm info webpack
安装具体版本webpack
npm install @xxxx
//内置路径对象
const path = require('path')
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
//__dirname为配置文件所在目录，和后面的参数组合构成输出文件的绝对路径
path: path.resolve(__dirname.
'bundle')
}
}### package中script的配置
"script":{
"bundle":"webpack"
}
}
//之后运行npm run bundle来进行打包webpack-cli 的作用：使得webpack的命令可以在命令行中生效~
//内置路径对象
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlungin = require('clean-webpack-plugin')
const webpack = require('webpack')
module.exports = {
//development为本地开发环境 production为线上环境
mode: 'development'
/*sourcemap 是一个映射工具，把打包后的js和源文件对应，在本地开发的时候开启dev可以很好的定位问题
sourcemap 有多个配置
inline：map文件内置到js中，不单独生成，只配置sourcemap就会单独生成一个map文件
cheap：报错的信息只需要精确到行，提高打包速度，且不管module里面的错误
module：引入的第三方也加入映射关系
eval：通过eval的形式引入映射关系，执行速度最快，性能最好。但是对于大文件定位不准确
本地开发最佳配置：cheap-module-eval-source-map
线上代码bug定位配置：cheap-module-source-map
正常情况下线上不需要开启source-map
*/
devtool: 'source-map'
devServer： {
//dev服务器应该部署的文件
contentBase: './dist'
//跑起来之后是否自动打开
open: true
//跨域代理，主流框架React，Vue都用了webpack启本地服务器，均支持webpack中的该配置
proxy: {
'/api': 'www.baidu.com'
}
//开启热更新
//React和Vue都有自己的方法实现组件的热更新，一些偏僻的数据热更新需要自己通过对modeule.hot的变量的配置自己写逻辑
hot: true,
hotOnly: true
}
entry: {
main: './src/index.js',
}
output: {
//一般设置文件在服务器的相对位置或者cdn域名
// publicPath: 'http://cdn.com.cn'
//name占位符，使打包输出的文件按照名字命名
filename: '[name].js',
//__dirname为配置文件所在目录，和后面的参数组合构成输出文件的绝对路径
path: path.resolve(__dirname.
'dist')
}
module: {
rules: [{
test: '/\.js$/',
exclcude: /node_modules/,
//把babel-loader理解成链接webpack和babel的桥梁，真正起作用的是@babel/preset-env中的库
//这个库中只能转义一部分ES6语法，其他诸如Promise，对象数组新增的方法等还需要借助polyfill（垫片）来实现
loader: "babel-loader",
//options里面的内容可以单独新建一个 .babelrc 的文件保存
options: {
//当需要些类库，给别人使用的组件时候，需要用transform-runtime来配置，因为prest-env+垫片的配置会把所有方法暴露到全局
/*"plugins":[["@babel/plugin-transform-runtime",{
"corejs":2,
"helpers":true,
"regenerator":true,
"useESModules":false
}]]
*/
presets: [
//转化es6代码
"@babel/preset-env", {
//让垫片按需加载
useBuiltIns: 'usage'
//配置目标浏览器，可以按需打包
targets: {
chrome: "67"
}
},
//转化react代码
"@babel/preset-react"
]
}
},
{
test: /\.(jpg|png|gif)$/,
use: {
/*url-loader也可以打包静态文件
url-loader会把图片转成base64文件而不是单独生成文件
优点：不用额外请求图片
缺点：图片太大会导致js文件太大延迟加载
使用:图片很小用url-loader，大文件用file-loader
*/
loader: 'file-loader',
options: {
//placeholder 占位符 => ext：文件后缀 hash：打包出文件的hash值
name: '[name].[ext]',
//文件输出位置到dist/images
outputPath: 'images/'
//文件小于20480（20k）则使用url-loader，大于20kb就会单独生成图片
limit： 204800
}
}
},
/*
style-loader:把生成的文件引入到html的head中
css-loader:把css中的引入关系合并变成一一对应的css文件
sass-loader:将sass文件转译成css，less-loader同理，执行顺序为从右到左
postcss-loader：需要新建一个postcss.config.js文件，这是一个有很多css预处理的插件的合集
postcss.config.js
module.exports={
plugins:[
//autoprefixer:自动增加厂商前缀
require('autoprefixer')
]
}
*/
// use: ['style-loader', 'css-loader','sass-loader','postcss-loader']
{
test: /\.css$/,
use: [
'style-loader', {
loader: 'css-loader',
options: {
//保证所有的引入都会执行所有的loader
importLoaders: 2，
//开启css模块化打包，在引入的时候由import './styles.scss'变成import styels from './styles.scss'
modules： true
},
'sass-loader',
'postcss-loader'
}
]
}, {
//对字体应用的打包，iconfont等第三方字体
test: /\.(eot|ttf|svg)$/,
use: {
loader: 'file-loader'
}
}
]
},
plugins: [
new HtmlWebpackPlugin({
//打包结束后自动生成一个html文件并把打包结束的js引入到该html中
//以自己指定的html为模板
template: './src/idnex.html'
}),
//打包之前删除指定目录里面的所有文件
new CleanWebpackPlungin([
'dist'
]),
new webpack.HotModuleReplacementPlugin()
],
/*用于开发环境下的tree-shaking配置，如果存在不需要shaking的文件需要在package.json中的
sideEffects 字段中数组中添加
eg：
{
“sideEffects”:["@babel/pollu-fill"]
}
*/
optimization{
usedEsxports:true
}
}整个配置文件，包括tree-shaking和sourcemap等在生产环境和开发环境需要不同配置的配置项
在实际开发中可以使用webpack-merge将所有的配置文件分成
webpack-common-config.js
webpack-dev-config.js
webpack-prod-config.js
然后通过merge进行文件合并，从而减少重复代码
文章用于个人记录回溯，有错误还望批评指正