Webpack入门简介

什么是Webpack

  我们在开发Java后端应用程序，可能会用maven来进行项目管理(编译、打包、发布、运行)，能够节省我们人力成本。而webpack也是类似的软件，只不过它是应用于前端。
  webpack一个项目构建工具，它是基于Node.js开发出来的一个前端工具，借助webpack可以实现资源的合并、打包、压缩等诸多功能。

webpack安装

  在创建一个webpack管理的工程，我们需要通常需要执行npm init命令用于创建一个package.json文件

# 初始化一个npm工程 参数-y 表示默认配置 默认在当前目录下创建一个package.json文件
[root@localhost temp-webpack]# npm init -y
# 进行全局安装
[root@localhost temp-webpack]# npm install webpack webpack-cli -g

webpack配置文件

  每个通过webpack管理的项目，都需要一个配置文件，默认名字是webpack.config.js，我们可以手动创建该文件，这个配置文件用于Node.js执行，所以里面的代码只要符合Node.js语法即可，下面是该文件常用选项样例：

const path = require('path')
const htmlWebpackPlugin = require('html-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
//Node.js导出一个模块
module.exports = {
    // 项目入口js文件 webpack主要依次文件作为入口 进行处理
    entry : path.join(__dirname, './src/main.js'),
    //输出目录以及文件名字
    output : {
        path: path.join(__dirname, './dist'),
        filename: 'bundle.js'
    },
    //主要引入第三方的module 对module进行处理 如下所示 webpack默认只支持js文件，对于样式文件
    //(css/less/scss)、静态资源文件(图片/字体)以及Vue模板文件均不支持，需要使用第三方loader进行处理
    module: {
        rules: [
            {test: /\.css$/, use:['style-loader', 'css-loader']},
            {test: /\.less$/, use:['style-loader', 'css-loader', 'less-loader']},
            {test: /\.scss$/, use:['style-loader', 'css-loader', 'sass-loader']},
            {test: /\.(jpg|png|gif|bmp|jpeg)$/, use:['url-loader?limit=2223&name=[hash:16]-[name].[ext]']},
            {test: /\.(ttf|eot|svg|woff|woff2)$/, use:['url-loader']},
            {test: /\.vue$/, use : 'vue-loader'},
            //webpack对于ES6某些语法不支持，因此需要使用babel-loader支持
            {test: /\.js/, use: 'babel-loader', exclude: /node_modules/}
        ]
    },
    //第三方plugin
    plugins: [
        new htmlWebpackPlugin({
            template:path.join(__dirname,'./src/index.html'),
            filename:'index.html'
        }),
        new VueLoaderPlugin()
    ],
    resolve: {
        alias: {
        	//解决import Vue from 'vue'加载的是runtime vue，通过下面配置可以加载完整版vue模块
        	//表示以vue结尾就按照这个路径加载
            "vue$": "vue/dist/vue.js"
        }
    }
}

webpack使用

  当我们修改完代码后我们就可以在终端下面敲webpack命令，进行打包处理

# 必须在webpack.config.js所在目录下执行webpack命令
# webpack必须全局安装 如上面说明
[root@localhost temp-webpack]# webpack

自动打包编译组件 – webpack-dev-server

安装

  然而我们每次修改完代码都需要手动执行webpack命令，很是麻烦，那么有没有什么方式不用手动执行webpack命令呢？我们可以安装webpack-dev-server，这个webpack-dev-server需要依赖本地webpack（即项目目录中的webpack），所以我们需要再次安装webpack，如下命令所示

[root@localhost temp-webpack]# npm install webpack webpack-cli -D
[root@localhost temp-webpack]# npm install webpack-dev-server -D

配置

  我们需要修改项目根目录下面package.json文件（通过npm init命令生成的）中的script属性，具体如下：

{
。。。
  "scripts": {
    "dev": "webpack-dev-server --open --port 3000 --contentBase src --hot",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  。。。
  }

我们加载dev配置

运行

  我们可以通过如下命令启动webpack-dev-server

[root@localhost temp-webpack]# npm run dev

配置项说明

  webpack-dev-server有一些常用配置项，如下所示：

参数	说明	举例
open	自动打开浏览器
port [value]	指定监听端口	–port 9000
contentBase [value]	指定默认打开根路径	contentBase dir_src
hot	热更新	只把修改内容作为更新补丁

第三方加载器

  webpack默认只支持js文件处理，对于样式文件(css/less/scss)、静态资源文件(图片/字体)以及Vue模板文件均不支持，需要使用第三方loader进行处理。

#样式文件加载器
[root@localhost temp-webpack]# npm install style-loader css-loader -D
[root@localhost temp-webpack]# npm install less less-loader -D
#静态资源加载器
[root@localhost temp-webpack]# npm install file-loader url-loader -D
#vue模板加载器
[root@localhost temp-webpack]# npm install vue-loader vue-template-compiler -D

  安装完加载器后需要增加相应的匹配规则，具体匹配规则如上面webpack配置文件中module所示。
对url-loader补充说明：

• url-loader后面是limit代表： 如果图片大小 >= limit 则不会转成base64，反之会转成base64
• name 表示指定图片名字格式 16位hash+原始名字+原始后缀名
• url-loader支持字体文件处理

Babel

  某些ES6语法webpack不支持，需要引入Babel loader进行处理。Babel会将ES6转成ES3语法。

配置Babel步骤

• 步骤1：安装相应包

# 核心组件
[root@localhost temp-webpack]# npm install babel-core babel-loader babel-plugin-transform-runtime -D
# 语法包
[root@localhost temp-webpack]# npm install babel-preset-env babel-preset-stage-0 -D

• 步骤2 在webpack.config.js中的module中增加匹配规则

    {test: /\.js/, use: 'babel-loader', exclude: /node_modules/}

• 步骤3 增加配置文件
  在项目根目录下增加.babelrc配置文件，配置内容如下

{
  "preset":['env', 'stage-0'],
  "plugins":['transform-runtime']
}