关于vue.js:从零搭建webpack

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 -D

2.配置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.js
let 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配置

关于vue.js:从零搭建webpack

webpack

一.装置webpack

二.配置的前置条件

一.新建build文件夹

二.在根目录新建src文件夹

三.配置package.json

三.配置进口入口及依据执行的命令合并

四. html-webpack-plugin和clean-webpack-plugin

1.装置这两个插件

2.引入插件

3.应用插件

4.测试以上两个插件

js

配置css和less

1.装置loader

2.配置loader

3.测试css

4.测试less

5.抽离css

6 主动增加前缀兼容浏览器

7 压缩css

配置解析图片

解析svg图标

解析vue文件

webpack解决跨域申请

评论

发表回复取消回复

更多文章

DDN HPC 存储硬件架构设计深度分析

探秘IO500：从Lustre并行文件系统出发，开启HPC存储性能新征程

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

关于vue.js:从零搭建webpack

webpack

一.装置webpack

二.配置的前置条件

一.新建build文件夹

二.在根目录新建src文件夹

三.配置package.json

三.配置进口入口及依据执行的命令合并

四. html-webpack-plugin和clean-webpack-plugin

1.装置这两个插件

2.引入插件

3.应用插件

4.测试以上两个插件

js

配置css和less

1.装置loader

2.配置loader

3.测试css

4.测试less

5.抽离css

6 主动增加前缀兼容浏览器

7 压缩css

配置解析图片

解析svg图标

解析vue文件

webpack解决跨域申请

评论

发表回复 取消回复

更多文章

DDN HPC 存储硬件架构设计深度分析

探秘IO500：从Lustre并行文件系统出发，开启HPC存储性能新征程

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

发表回复取消回复