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