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进行文件合并，从而缩小反复代码
文章用于集体记录回溯，有谬误还望批评指正
发表回复