1. 技术文章
  2. Webpack打包工具

Webpack打包工具

由 匆匆过客 提交于 2020-03-03 04:23:56

文章目录


https://www.bilibili.com/video/av68424291/?p=84

1，webpack需要npm安装

webpack是近期最火的一款模块加载器兼打包工具，它能把各种资源，例如JS（含JSX）、coffee、样式（含less/sass）、图片等都作为模块来使用和处理,它能有Grunt或Gulp所有基本功能。webpack的官网是 https://webpack.github.io/ ，文档地址是https://webpack.github.io/docs，官网对webpack的定义是MODULE BUNDLER，他的目的就是把有依赖关系的各种文件打包成一系列的静态资源。 请看下图：
img

webpack 的优势

其优势主要可以归类为如下几个：

webpack是以 commonJS 的形式来书写脚本滴，但对 AMD/CMD 的支持也很全面，方便旧项目进行代码迁移。
支持很多模块加载器的调用，可以使模块加载器灵活定制，比如babel-loader加载器，该加载器能使我们使用ES6的语法来编写代码;less-loader加载器，可以将less编译成css文件；
开发便捷，能替代部分 grunt/gulp 的工作，比如打包、压缩混淆、图片转base64等。
可以通过配置打包成多个文件，有效的利用浏览器的缓存功能提升性能。

npm是nodeJS的一个打包工具，它是依赖node环境的，所以在安装npm之前需要先安装node，npm是和node一起安装的。

安装好node之后再安装全局的webpack

  • 在终端执行命令：
npm install webpack -g
  • 如果指定webpack版本安装：
npm install webpack@3.6.0 -g

创建一个空文件夹作为vs code的工作环境，新建dist文件夹（打包js）和src文件夹（html页面和js文件等）

2，使用webpack打包工具，就不用在html页面引用js文件了，如何引用？

先创建一个mathUtil.js文件，导出add和mul方法

function add(a,b){
    return a+b;
}
function mul(a,b){
    return a*b;
}

// 导出方法，在main.js入口函数中进行引用
module.exports={
    add,mul
}

创建一个main.js文件，这是js入口文件，所有的js文件都可以引用到main.js文件中，最后把main.js文件使用webpack打包即可,然后再html页面把打包后的js文件引用进去。

//main.js是我们项目的JS入口文件

// 导入mathUtil.js的那两个方法
//1，使用commonJS的模块化规范导入
const{add,mul}=require("./js/mathUtil.js");
console.log(10,20);
console.log(10,20);

终端打包命令：（把main.js入口文件打包成bundle.js）

webpack ./src/main.js ./dist/bundle.js

然后可以在浏览器打开html文件，js正常能引用到。

还有一种方法?

创建一个info.js文件

export const name="圆梦杨aa";
export const age=18;

然后再main.js中引用

//2，使用ES6的模块化规范导入
import{name,age} from "./js/info";
console.log(name);
console.log(age);

3，webpack打包命令

3.1，全局webpack

上面说了一种打包方式

webpack ./src/main.js ./dist/bundle.js

这里说一种配置文件配置了以后，打包命令只输入webpack就可以了。

首先需要进行

npm init //初始化
npm install //安装

然后就生成了package.json文件（过程中要输入文件夹名和js文件名，都是选填）

配置文件名字必须是webpack.config.js

const path=require('path');

//在配置文件中加入配置，在终端webpack打包时就不用指定文件了，直接命令webpack就可以了
module.exports={
    entry:'./src/main.js',
    output:{
        path:path.resolve(__dirname,'dist'),//_dirname是node上下文的一个全局变量，是当前config.js所在文件夹的路径，然后拼接一个dist，为完整路径
        filename:'bundle.js'
    }
}

这样，打包可以直接输入命令：webpack

在package.json文件中，“scripts”是脚本配置，也就是说，配置了“build”:"webpack"之后，就可以在终端输入命令行

npm run build 从而执行webpack，也就是打包。

{
  "name": "meetwebpack",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build":"webpack"
  },
  "author": "",
  "license": "ISC"
}

3.2，局部安装webpack（本地）

上面的安装webpack是全局的webpack，本地安装webpack命令

npm install webpack@3.6.0 --save-dev

然后重新打开package.json文件，会发现多了个依赖

"devDependencies": {
    "webpack": "^3.6.0"
  }

注：在终端执行webpack命令的使用的都是全局的webpack，如果使用本地的webpack的话，先安装，安装好，在终端执行命令

npm run build

会首先去脚本找build，上面已经设置过了，会执行webpack打包，如果找不到的话，会自动找全局的webpack。

3.3，webpack打包css文件

css文件也不需要html的引入，也要打包到main.js入口文件中。

新建一个normal.css文件，写一个简单的样式。

body{
    background-color: rebeccapurple;
}

然后再main.js入口文件中引入

//引入css
require('./css/normal.css')

然后进行打包，提示错误了，是因为没有安装loader

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-F1mnvSCU-1570498720131)(D:\文件笔记\image\1569814517000.png)]

3.4，安装loader

需要先安装style-loader，然后再安装css-loader

终端命令：

npm install --save-dev css-loader
npm install style-loader--save-dev

安装好之后，还需要在webpack.config.js文件中进行loader的配置

const path=require('path');

//在配置文件中加入配置，在终端webpack打包时就不用指定文件了，直接命令webpack就可以了
module.exports={
    entry:'./src/main.js',
    output:{
        path:path.resolve(__dirname,'dist'),//_dirname是node上下文的一个全局变量，是当前config.js所在文件夹的路径，然后拼接一个dist，为完整路径
        filename:'bundle.js'
    },
    module:{
        rules:[
            {
                test:/\.css$/,
                /*
                    css-loader只负责将css文件进行加载
                    style-loader负责将样式添加到dom中
                    使用多个loader时，是从右向左
                */
                use:['style-loader','css-loader']
            }
        ]
    }
}

然后就打包成功了，页面就有样式了。

3.5，webpack打包less文件

先写一个less文件special.less（设置了全局字体的样式）

@fontSize:50px;
@fontColor:orange;

body{
    font-size: @fontSize;
    color: @fontColor; 
    }

然后下载less-loader，命令行

npm install -save-dev less-loader less

然后在webpack.config.js中加入less-loader的配置（这些配置都去webpack官网上面找）

加入less-loader的规则

rules:[
            {
                test:/\.css$/,
                /*
                    css-loader只负责将css文件进行加载
                    style-loader负责将样式添加到dom中
                    使用多个loader时，是从右向左
                */
                use:['style-loader','css-loader']
            },
            {
                test: /\.less$/,
                use: [{
                    loader: "style-loader" // creates style nodes from JS strings
                }, {
                    loader: "css-loader" // translates CSS into CommonJS
                }, {
                    loader: "less-loader" // compiles Less to CSS
                }]
            }
        ]

然后就可以打包了，命令行

npm run build

这样样式都加载到了html页面。

3.6，webpack打包图片文件

终端命令行

npm install --save-dev url-loader

然后在webpack.config.js配置中加入url-loader的配置规则

{
                test: /\.(png|jpg|gif)$/,
                use: [
                  {
                    loader: 'url-loader',
                    options: {
                        //当加载的图片小于limit时，会将图片编译成base64字符串形式。
                        //当加载的图片大于limit时，需要使用file-loader模块进行加载。
                      limit: 8192
                    }
                  }
                ]
              }

然后重新打包就可以使用了，比如说css中设置了一个背景颜色background:url(./test.jpg)，然后图片可以正常显示。

如果图片大小超过了limit限制的大小的话，另外需要安装file-loader。

file-loader安装命令行：

npm install --save-dev file-loader

在webpack.config.js配置中加入file-loader的配置规则

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'file-loader',
            options: {}
          }
        ]
      }
    ]
  }
}

3.7webpack-ES6转ES5的babel

webpack打包的js文件，ES6语法并没有转成ES5，意味着可能对一些ES6还不支持的浏览器没有办法很好的运行我们的代码。

如果希望将ES6的代码转成ES5，那么就需要使用到babel。（和官网有些差别）

npm install --save-dev babel-loader@7 babel-core babel-preset-es2015

然后配置规则

{
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                  loader: 'babel-loader',
                  options: {
                    presets: ['es2015']
                  }
                }
              }

然后重新打包，bundle.js中就没有ES6的东西了。

4，webpack-使用Vue的配置过程

安装vue的命令行，因为我们后续是在实际项目中也会使用vue的，所以并不是开发时依赖（不需要–save-dev安装）

npm install vue --save

然后在webpack.config.js中加入配置（resolve和module是同级的），不加会报错。

 resolve:{
        alias:{
            'vue$':'vue/dist/vue.esm.js'
        }
    }

然后就可以使用vue了，在main.js入口文件中引入vue，并创建vue实例

//引入vue
import Vue from 'vue';
const app=new Vue({
    el:'#app',
    data:{
        message:'王盼'
    }
});

在html页面创建元素

 <div id="app">
      {{message}}
  </div>

页面数据正常显示。

5，创建Vue时template和el的关系

规范：在html页面通常只允许出现

<div id="app">
    
</div>

其他的都要在创建实例的template中写，这样写，template的内容会替换掉el的内容（el就是上面html的东西）

//引入vue
import Vue from 'vue';
const app=new Vue({
    el:'#app',
    template:`
    <div>
    <div>{{message}}</div>
    <button @click="btnClick">按钮</button>
    </div>
    `,
    data:{
        message:'王盼'
    },
    methods:{
        btnClick:function(){
            
        }
    }
});

6，Vue的终极使用方案

在html页面的内容

<div id="app"></div>

新建一个文件夹vue，这里专门写vue的代码。

在vue文件夹中新建一个App.vue文件，用于写组件，vs code下载一个插件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WGXCmKo9-1570498720134)(D:\文件笔记\image\1569834420208.png)]

然后新建.vue的文件后就有模板了。

在新建的App.vue文件中定义一个组件

<template>
<div>
        <div id="message">{{message}}</div>
        <button @click="btnClick">按钮</button>
        </div>
</template>
<script>
export default {
     data(){
        return {
            message:'大哥'
        }
    },
    methods:{
        btnClick(){

        }
    }
}
</script>
<style scoped>
    .message{
        color: black;
    }
</style>

在main.js的入口文件中导入这个组件并且使用

import App from './vue/App.vue';
const app=new Vue({
    el:'#app',
    template:'<App/>',
    components:{
        App
    }
});

这样，html页面和入口文件main.js更简洁明了了。

但是还需要安装vue-loader和vue-template-compiler才能识别.vue文件。

终端命令行

npm install vue-loader vue-template-compiler --save-dev

安装好之后在webpack.config.js文件中加入配置

{
   test:/\.vue$/,
   use:['vue-loader']
}

然后重新打包，会发现出错了

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GKgvuNRQ-1570498720135)(D:\文件笔记\image\1569835804235.png)]

解决方法：到package.json文件中把vue-loader的版本换成低版本的，比如

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0qJ74Rsn-1570498720136)(D:\文件笔记\image\1569836519153.png)]

然后重新安装，执行命令npm install

然后再重新打包，就不报错了。

vue其实就是很多个组件组成的一张组件网。现在新建一个Cpn.vue文件，写一个组件Cpns

<template>
    <div>
        <h2>我叫樊江锋</h2>
        <p>马上就下班了</p>
        {{message}}
    </div>
</template>
<script>
export default {
    name:'Cpns',
    data(){
        return {
            message:'你好帅'
        }
    }
}
</script>

然后把组件可以注册到上面的APP.vue组件中

<template>
<div>
        <div id="message">{{message}}</div>
        <button @click="btnClick">按钮</button>
        <cpns/>
</div>
</template>
<script>
import Cpns from './Cpn.vue'

export default {
    components:{
        Cpns
    },
     data(){
        return {
            message:'大哥'
        }
    },
    methods:{
        btnClick(){

        }
    }
}
</script>
<style scoped>
    .message{
        color: black;
    }
</style>

这样就实现了多个组件并列使用，webpack重新打包，页面上会有App和Cpns两个组件。

7，webpack横幅plugin的使用

横幅plugin，也就是BannerPlugin，打包后对版权进行声明。

在webpack.config.js文件中先声明一个webpack

const webpack=require('webpack');

然后在resolve平级的地方添加

plugins:[
      new webpack.BannerPlugin('最终版权归樊江锋先生所有')
    ]

然后终端npm run build重新打包，打包之后重新打开bundle.js文件，会看到版权声明。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hRBP9fmr-1570498720138)(D:\文件笔记\image\1570496819869.png)]

8，webpack-HtmlWebpackPlugin的使用

HtmlWebnpackPlugin插件可以做什么？

  • 自动生成一个index.html文件（可以指定模板来生成）
  • 将打包的js文件，自动通过script标签插入到body中

上面讲的横幅插件是属于webpack的，所以引用了一下webpack即可，但是这个插件不是属于webpack的，所以需要先终端npm命令安装此插件。

npm install html-webpack-plugin --save-dev

在webpack.config.js文件中

plugins:[
      new webpack.BannerPlugin('最终版权归樊江锋先生所有'),
      new HtmlWebpackPlugin({
        template:'index.html'
      })
    ]

index.html是指定的模板进行html页面的生成。

标签
Webpack
js代码
html代码
less
dev
build
vue
css
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!