webpack
webpack_ 是一个古代 JavaScript 应用程序的_动态模块打包器(module bundler)_。当 webpack 解决应用程序时，它会递归地构建一个_依赖关系图(dependency graph)_，其中蕴含应用程序须要的每个模块，而后将所有这些模块打包成一个或多个 _bundle_。
一.装置webpack
npm init -y初始化我的项目npm i webpack@4.43.0 webpack-cli@3.3.12 webpack-dev-server@3.11.0 -D这里我指定了版本号 因为他们三个是须要相互依赖的，版本不对启动时会报错
二.配置的前置条件
一.新建build文件夹
build
- webpack.base.js //兼容开发环境和生产环境的配置
- webpack.prod.js //生产环境的配置
- webpack.dev.js //开发环境的配置
二.在根目录新建src文件夹
src
- index//主入口文件，相当于vue中的main.js
三.配置package.json
新增scripts配置
"scripts": { "dev": "webpack-dev-server --env=dev --config build/webpack.base.js", "build": "webpack --env=prod --config build/webpack.base.js"}dev的配置
- webpack-dev-server：应用下面咱们装置的webpack-dev-server插件帮咱们本人起一个服务
- --env是前面用来辨别环境的标识
- --config build/webpack.base.js：是运行此命令时启动该文件
prod的配置
- webpack:打包命令
- 前面两个与dev的配置雷同
三.配置进口入口及依据执行的命令合并
webpack.base.js
let dev = require('./webpack.dev');//引入开发环境配置let prod = require('./webpack.prod');//引入生产环境配置let {resolve} = require('path');//应用path.resolve将门路解析成绝对路径let {merge} = require('webpack-merge');//执行npm i webpack-merge -D装置合并文件的插件module.exports = (env) => {//env为下面设置的--env=xxx let isDev = env === 'dev' ? true : false;//判断如果是开发环境则返回true否则返回false let base = {//配置兼容开发和生产 entry: resolve(__dirname, '../src/index.js'),//入口文件 output: {//进口文件 filename: 'bundle.js',//生成的js文件名 path: resolve(__dirname, '../dist')//生成在哪个目录下 } } isDev ? merge(base, dev) : merge(base, prod);//依照传进来的参数进行合并}webpack.dev.js
module.exports={ mode:'development'}webpack.prod.js
module.exports={ mode:'production'}通过下面的配置执行npm run build就会打包成如下文件目录
四. html-webpack-plugin和clean-webpack-plugin
html-webpack-plugin:(1)为html文件中引入的内部资源如script、link动静增加每次compile后的hash，避免援用缓存的内部文件问题(2)能够生成创立html入口文件，比方单页面能够生成一个html文件入口
clean-webpack-plugin:每次打包前先革除文件
1.装置这两个插件
npm i html-webpack-plugin clean-webpack-plugin
2.引入插件
CleanWebpackPlugin生产环境才用的到所以只在生产环境引入即可
webpack.base.js
let HtmlWebpackPlugin = require('html-webpack-plugin');webpack.prod.js
let {CleanWebpackPlugin} = require('clean-webpack-plugin');3.应用插件
webpack.base.js
在入口进口的平级减少以下内容
plugins:[ new HtmlWebpackPlugin({ //不写会默认为生成的名为index.html filename: 'index.html', //应用的模板 template:resolve(__dirname,'../index.html') })]webpack.prod.js
plugins:[ new CleanWebpackPlugin()]4.测试以上两个插件
上图中dist文件夹中有一个4444.js的文件,咱们在根目录创立一个index.html模板
执行打包命令npm run build生成如下文件
咱们看到了下面的4444.js文件曾经被革除，并且生成了index.html，index.html会主动引入文件夹下的bundle.js
js
因为webpack4中曾经内置了配置js和压缩js，这里就不再配置js了。
配置css和less
1.装置loader
npm install style-loader css-loader less-loader less -D2.配置loader
在webpack.base.js中入口进口同级下配置module模块
module:{ rules:[ //use数组中的执行程序是从右向左 {test:/.css$/, use:['style-loader','css-loader']}, {test:/.less/, use:['style-loader','css-loader','less-loader']} ]}3.测试css
- 1 我的项目中新建css文件夹
- 2 index.js
import './css/css.css'
- 3 执行打包命令
测试通过
4.测试less
- 1 新建less文件
- 2 index.js
import './less/less.less'
- 3 执行打包命令
测试通过
5.抽离css
- 1 装置插件
npm i mini-css-extract-plugin
- 2 引入插件
webpack.prod.jslet MiniCssExtractPlugin = require('mini-css-extract-plugin');
- 3 应用插件
module: { rules: [ {test:/.css$/,use:[MiniCssExtractPlugin.loader,'css-loader']}, {test:/.less/, use:[MiniCssExtractPlugin.loader,'css-loader','less-loader']}, ]},plugins:[ new MiniCssExtractPlugin({ filename:'static/css/[name].[hash].css'})]- 4 index.js引入css和less文件
import './css/css.css';body{ background: pink;}import './less/less.less';@mainColor:#000;html{ background: @mainColor;}- 5 打包
6 主动增加前缀兼容浏览器
- 1 装置插件
npm i postcss-loader autoprefixer- 2 配置postcss.config.js
1 在根目录下新建postcss.config.js文件，配置如下
module.exports={ plugins:[require('autoprefixer')]}2 在package.json配置如下
"browserslist": [ "defaults",//代表着寰球超过1%人应用的浏览器 "not ie <= 8",//示意所有浏览器兼容到最初两个版本 "last 2 versions"//示意IE浏览器版本大于8（实则用npx browserslist 跑进去不蕴含IE9 ） ]3 批改webpack.prod.js文件
{test:/.css$/, use:['style-loader','css-loader','postcss-loader']},{test:/.less/, use:['style-loader','css-loader','less-loader','postcss-loader']},4 测试
在下面的css文件和less文件写下transform属性打包之后的后果
7 压缩css
- 1 装置插件
npm i optimize-css-assets-webpack-plugin- 2 引入插件
webpack.prod.js
let OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');- 3 应用插件
在plugins中退出
new OptimizeCssAssetsWebpackPlugin()- 4 打包测试
配置解析图片
- 1 装置所须要的插件
npm i url-loader file-loader- 2 批改index.js
import img from './image/earth.jpg';let imgId = document.getElementById('image');let image = new Image();image.src = img;imgId.appendChild(image);- 3 配置webpack.base.js
在module.rules中退出
{ test: /.(jpg|png|gif)$/, use: { loader:'url-loader', options:{ outputPath:'static/image',//打包生成的门路 name:'[name].[ext]' } }}- 4 测试
打包胜利并且能在浏览器失常显示
解析svg图标
1.在webpack.base.js中的module退出
{ test:/.(ttf|eot|woff|woff2|svg)$/, use:[ { loader:'file-loader', options:{ outputPath:'static/image', name:'[name].[ext]' } } ]}2.测试
- 1 index.html
<div id="svg"></div>
- 2 index.js
import add from './svg/add.svg'let svgBox = document.getElementById('svg');let svg = new Image();svg.src = add;svgBox.appendChild(svg);-3 浏览器显示
解析vue文件
- 1 装置vue所须要的插件
npm i vue-loader vue-template-compiler vue vue-loader/lib/plugin- 2 批改配置
module中的rules退出{test: /.vue$/, use: 'vue-loader'}
- 3 引入解析vue的插件并应用
let VueLoaderPlugin = require('vue-loader/lib/plugin')在plugins中退出
new VueLoaderPlugin()- 4 因为引入vue咱们通常应用
import Vue from 'vue'其实他是引入的vue/dist/vue.js这个门路，所以咱们须要在webpack中配置一下，在入口进口同级退出
resolve: { alias: {//起一个别名 'vue': 'vue/dist/vue.js' }},- 5 测试
index.js
import Vue from 'vue'import App from './App.vue'new Vue({ el: '#app', components: { App }, template: '<App/>'});index.html
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>webpack-vue</title></head><body><div id="app"></div></body></html>app.vue
<template> <div id="app">666</div></template><script> export default { name: "App" }</script>webpack解决跨域申请
webpack.dev.js
devServer:{proxy:{'/api':{target:'xxx',//要申请的接口pathRewrite:{'/api':''}//重写端口（申请时把api置空） } } }一个简略的应用于vue的webpack配置