4、webpack

Webpack

从本质上，Webpack是现代JavaScript应用的静态模块打包工具

必须依赖Node.js环境，Node.js自带了软件包管理工具npm

DOS下，node -v查看node版本

安装Webpack

DOS命令：npm install webpack@3.6.0 -g
- -g代表全局webpack安装，可以在任何终端执行webpack
DOS命令：npm install webpack@3.6.0 --save-dev
- 局部安装，在package.json中定义了script时，使用webpack命令，那么使用的是局部

安装完成使用webpack --version查看webpack版本

起步

项目目录结构

project -- 项目根路径
- src -- 项目原码，在此文件夹开发
- dist -- 项目打包后存放的文件夹，用于发布
- index.html -- 项目入口

初始化项目package.json

命令：npm init，执行该命令可以创建package.json，管理项目依赖

打包

命令：webpack ./src/main.js ./dist/bundle.js ---》 webpack 需要打包的文件路径打包后的文件路径

webpack.config.js

文件名固定

webpack在打包的时候，只会根据入口的js文件，开始依次打包所有导入的js，没有被导入的文件不会被打包

//获取dist的绝对路径
const path = require("path");
//声明打包入口js和出口js
module.exports = {
    entry: './src/main.js',
    output: {
        //此处的path需要是绝对路径，使用path.resolve(__dirname,'出口js目录')来确定出口js目录
        path: path.resolve(__dirname,'dist'),
        filename: 'bundle.js'
    },
    module: {
        
    }
}

然后使用webpack命令就可以直接打包

命令映射

在package.json中scripts对象中，可以设置命令映射

{
    "name": "meet",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "build": "webpack",
        "dev": "webpack-dev-server --open"
    },
    "author": "",
    "license": "ISC",
    "devDependencies": {
        "webpack": "^3.6.0"
    }
}

使用npm run 命令，可以执行该命令对应的命令值，这种方法，可以优先执行项目本地的webpack，devDependencies就是本地webpack

loader

可以在官网查看对应的loader安装方法：https://www.webpackjs.com/loaders/

如果出现Module build failed: TypeError: this.getOptions is not a function异常，说明安装的loader版本过高，百度解决

webpack@3.6.0常用loader以及plugin版本

"devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-es2015": "^6.24.1",
    "css-loader": "^3.6.0",
    "file-loader": "^3.0.1",
    "html-webpack-plugin": "^2.30.1",
    "style-loader": "^2.0.0",
    "uglifyjs-webpack-plugin": "^1.1.1",
    "url-loader": "^2.3.0",
    "vue-loader": "^13.0.0",
    "vue-template-compiler": "^2.6.14",
    "webpack": "^3.6.0",
    "webpack-dev-server": "^2.9.1"
},
"dependencies": {
    "vue": "^2.6.14"
}

处理css

如果需要处理css，那么需要对webpack扩展对应的loader就可以了

1、安装配置css-loader以及style-loader

如果只安装css-loader，那么只会打包css代码，而样式并不会生效，style-loader的作用就是将模块的导出作为样式添加到 DOM 中

命令：

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

配置：

module.exports = {
    module: {
         rules: [
            {
                test: /\.css$/,
                //读取配置文件是从右向左，所以css-loader需要先被读取
                use: ['style-loader', 'css-loader']
            }
        ]
    }
}

2、在入口js，导入需要的css文件

处理图片

如果在css中，通过url引用了一张图片，那么在打包的时候，会去打包这个图片，需要url-loader

安装配置url-loader和file-loader

命令：

npm install url-loader --save-dev
npm install file-loader --save-dev

配置：

module.exports = {
    entry: './src/main.js',
    output: {
        path: path.resolve(__dirname,'dist'),
        filename: 'bundle.js',
        //如果不打包index.html,需要加publicPath，打包后使用url的根路径
        publicPath: 'dist/'
    },
    module: {
        rules: [
            {
                test: /\.(png|jpg|gif|jpeg)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            //当加载的图片小于limit，会将图片编译成base64
                            //大于limit使用file-loader
                            limit: 8192,
                            //对文件进行命名，采用img/文件名.8位hash.后缀
                            name: 'img/[name].[hash:8].[ext]'
                        }
                    }
                ]
            }
        ]
    }
}

ES6打包成ES5

安装配置babel-loader、babel-core、babel-preset-es2015

命令：npm install babel-loader@7.1.5 babel-core@6.26.3 babel-preset-es2015@6.24.1 --save-dev

配置：

module: {
    rules: [
        {
            test: /\.js$/,
            //排除转化的文件，只转化src里面的js
            exclude: /(node_modules|bower_components)/,
            use: {
                loader: 'babel-loader',
                options: {
                    presets: ['es2015']
                }
            }
        }
    ]
}

webpack配置Vue

1、下载vuejs

命令：npm install vue --save

2、引入vuejs

由于直接import Vue from 'vue'引入的vue版本是runtime-only，这个版本是不支持template编译的，所以需要使用runtime-compiler，在webpack.config.js中，配置vue的别名

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

el和template的区别

el用于指定Vue要管理的DOM，可以帮助解析其中的指令、事件监听等等。
如果Vue实例中同时指定了template，那么template模板的内容会替换掉挂载的对应el的模板。

3、创建vue文件

<template>
    <div>
        <button>but</button>
        <h1>{{msg}}</h1>
    </div>
</template>
<script>
    export default {
        name: "app",
        data() {
            return {
                msg: "hello!!!"
            }
        }
    }
</script>
<style scoped>
    h1{
        color: red;
    }
</style>

4、安装vue-loader、vue-template-compiler

命令：npm install vue-loader vue-template-compiler --save-dev

配置：

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

如果在打包时，提示插件问题，可以将vue-loader版本切换为^13.0.0

5、引入vue组件文件，并注册组件在Vue实例template中使用

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

Plugin

loader和plugin的区别

loader主要用于转换某些类型的模块，它是一个加载转换器。
plugin是插件，它是对webpack本身的扩展，是一个扩展器。

plugin的使用过程

步骤一：通过npm安装需要使用的plugins(某些webpack已经内置的插件不需要安装)
步骤二：在webpack.config.js中的plugins中配置插件。

版权plugin

此插件webpack自带，不需要安装

1、在webpack.config.js中导入webpack

const webpack = require("webpack");

2、在该文件中，module.exports内创建plugins数组

plugins: [
    new webpack.BannerPlugin('最终版权归yhgh所有')
]

打包html的plugin

在真实发布项目时，发布的是dist文件夹中的内容，但是dist文件夹中如果没有index.html文件，那么打包的js等文件也就没有意义了。
所以，我们需要将index.html文件打包到dist文件夹中，这个时候就可以使用HtmlWebpackPlugin插件

功能

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

安装

webpack@3.6.0推荐安装html-webpack-plugin@2.30.1

由于不是webpack自带的插件，所以需要进行安装

命令：npm install html-webpack-plugin --save-dev

使用插件

webpack.config.js文件中引入插件

const htmlWebpackPlugin = require("html-webpack-plugin");

修改webpack.config.js文件中plugins部分的内容如下

plugins: [
    new htmlWebpackPlugin({
        template:'index.html'
    })
]

删除之前在output中添加的publicPath属性否则插入的script标签中的src可能会有问题

js压缩插件

安装插件

由于不是webpack自带的插件，所以需要进行安装

命令：npm install uglifyjs-webpack-plugin@1.1.1 --save-dev

使用插件

在webpack.config.js中引入插件uglifyjs

const uglifyJsWebpackPlugin = require("uglifyjs-webpack-plugin");

修改webpack.config.js文件，使用插件

plugins: [
    new uglifyJsWebpackPlugin();
]

此插件使用后，版权插件不会生效，所以，二选一

webpack-dev-server服务器搭建

webpack提供了一个可选的本地开发服务器，这个本地服务器基于node.js搭建，内部使用express框架，可以实现我们想要的让浏览器自动刷新显示我们修改后的结果。

安装

它是一个单独的模块，在webpack中使用之前需要先安装它

命令：npm install --save-dev webpack-dev-server@2.9.1

配置

需要在webpack.config.js中进行配置，在module同级的devServer中配置

module.exports = {
    devServer: {
        contentBase: './dist',
        port: 8088,
        inline: true
    }
}

devserver也是作为webpack中的一个选项，选项本身可以设置如下属性：

contentBase：为哪一个文件夹提供本地服务，默认是根文件夹，我们这里要填写./dist
port：端口号
inline：页面实时刷新，代码改变就刷新，true
historyApiFallback：在SPA页面中，依赖HTML5的history模式

启动服务

命令：webpack-dev-server

推荐使用在package.json中，配置命令映射

添加--open参数，可以在服务器启动时打开浏览器

"dev": "webpack-dev-server --open"

Webpack

安装Webpack

起步

项目目录结构

初始化项目package.json

打包

webpack.config.js

命令映射

loader

webpack@3.6.0常用loader以及plugin版本

处理css

1、安装配置css-loader以及style-loader

2、在入口js，导入需要的css文件

处理图片

安装配置url-loader和file-loader

ES6打包成ES5

安装配置babel-loader、babel-core、babel-preset-es2015

webpack配置Vue

1、下载vuejs

2、引入vuejs

el和template的区别

3、创建vue文件

4、安装vue-loader、vue-template-compiler

5、引入vue组件文件，并注册组件在Vue实例template中使用

Plugin

loader和plugin的区别

plugin的使用过程

版权plugin

打包html的plugin

功能

安装

使用插件

js压缩插件

安装插件

使用插件

webpack-dev-server服务器搭建

安装

配置

启动服务

Contact

Information

Explanation