阅读 785

webpack4.0+vue+es6配置

用webpack4.0做更多事情

上一篇webpack入门文章中,我们学会了怎么使用webpack搭建一个前端工程,了解了webpack的一些核心概念。但是webpack的功力远不止如此,在本文中,我们将学习如何使用webpack来做更多的事情,如何进行环境分离,如何配置es6,再配置vue,使用vue来进行开发。

这篇文章是入门文章的延续,不太了解webpack的同学可以先从入门文章看起,循序渐进。

开发与生产环境的分离

在实际开发中,会有许多环境,有 开发环境,生产环境,测试环境,预发环境....(因公司而异)。最常见的两种是开发环境和生产环境。在不同的环境会有很多不同的配置。所以我们需要把不同环境的配置文件从webpack.config.js文件中分离出来。

首先进行目录的改造。首先安装依赖,用于融合配置文件。

npm install -D webpack-merge
复制代码
webpack-demo
|- config
    |- webpack.base.js
    |- webpack.dev.js
    |- webpack.pro.js
|- package.json
|- src
    |- 略
复制代码

webpack.base.js

const path = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: {
        index: path.resolve(__dirname,'./src/index.js'),
    },
    output: {
        filename: '[name].[hash].js',
        path: path.resolve(__dirname,'../dist'),
    },
    module: {
        rules:[
            {
                test: /\.css$/,
                use: [
                    "style-loader",
                    "css-loader"
                ]
            },{
                test: /\.(png|svg|jpg|gif)$/,
                use:{
                    loader:'url-loader',
                    options: {
                        limit: 8192,
                        name: 'images/[name].[ext]?[hash]'
                    }
                }
            }
        ]
    },
    plugins:[
        new HtmlWebpackPlugin({
            title:'WebpackTest'
        })
    ]
}
复制代码

output文件名修改: 我们需要对output的filename选项进行修改。在用户访问网页之后,会加载dist包中的bundle.js,并且进行缓存。在我们进行版本更新以后,如果加载文件名还是bundle.js的话。浏览器不会拉去新的bundle.js资源,会直接使用浏览器缓存的资源。所以我们需要将每次打包后的资源名都命名不同。[name].[hash].js会根据文件内容给每个文件名加上唯一的哈希,这样就不会出现重名文件了。

开发环境(dev)

webpack.dev.js

const merge = require("webpack-merge");
const base = require("./webpack.base");
const webpack = require("webpack");

module.exports = merge(base ,{
    mode: 'development',
    devtool: 'source-map',
    devServer:{
        compress: true, //启用压缩
        port: 1207,     //端口
        open: false,    //自动打开浏览器
        hot: true
    },
    plugins:[
        new webpack.HotModuleReplacementPlugin()
    ]
})
复制代码

首先介绍一下开发环境下我们需要进行配置的几点

  • source-map:source-map在开发中的用处很大,在浏览器允许的代码是经过编译以后的代码,在出现一些错误的时候,如果不使用source-map的时候,错误无法定位到源代码中。使用了source-map以后,可以直接定位到错误出现的行。配置source-map只需要将devtool属性配置为source-map就可以。
  • devserver配置:devserver属性可以对开发环境选项进行一些配置,比如:自动打开浏览器,服务端口号,热更替,是否压缩等。
  • 模块热更替(HotModuleReplacementPlugin): 模块热更替允许在更新各种模块的时候,无需完全刷新页面,这个功能在开发环境中非常实用。最简单的应用场景,你在写一些样式的时候,需要自己配置一些数据上去,这时候你需要调整字体大小。使用了模块热更替之后会页面不用刷新就可以看到效果,省去了重新配置数据。在开启热更替时,还需要对模块热更替插件进行配置,否则会报错。

生产环境(pro)

const merge = require('webpack-merge');
const base = require("./webpack.base.js");
const CleanWebpackPlugin = require('clean-webpack-plugin');
const path = require("path");

module.exports = merge(base ,{
    mode: 'production',
    plugins: [
        new CleanWebpackPlugin(['dist'],{
            root: path.resolve(__dirname,'../'),
        })
    ],
})
复制代码
  • clean-webpack-plugin:用于删除文件,在每次打包时,dist文件夹都会出现新的文件,如果不进行删除处理的话,会一直累加到dist文件夹里面。所以这里使用clean-webpack-plugin插件,每次打包的时候都会先删除之前的dist文件。

模式(mode)

在入门篇中,我们每次编译后都会出现he 'mode' option has not been set的警告。这是webpack4新增的mode属性,有两种mode,development和production.

  • development模式:
    • process.env.NODE_ENV的值设为 development,过去需要通过webpack.DefinePlugin进行配置。
    • 提供注释、开发阶段的详细错误日志和提示。
  • production模式:
    • process.env.NODE_ENV的值设为 production,过去需要通过webpack.DefinePlugin进行配置。
    • 开启所有的优化代码,压缩插件UglifyJsPlugin,过去需要自行配置。
    • 去掉一些只在开发中运行的代码。

process.env.NODE_ENV值用于再开发中进行环境判断。

package.json

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --config config/webpack.dev.js",
    "build": "webpack --config config/webpack.pro.js"
},
复制代码

再对npm script进行修改,指定对应配置文件。

es6配置

下面我们进行es6的配置,由于es6未被所有浏览器全面支持,所有我们在使用的时候还想需要将其转换为es5.主要用到的工具是babel,先进行babel依赖的安装。

npm i -D @babel/core @babel/plugin-transform-runtime @babel/preset-env babel-loader
复制代码

webpack.base.js

...略
module:{
    rulse:[
        ...略
        {
            test: /\.js$/,
            loader: 'babel-loader',
            exclude: /node_modules/,
        }
    ]
}
复制代码

配置loader,这里的exclde选项用于忽略一些文件(敲黑板),减少webpack的处理量。/node_modules/都是已经转好的文件。

新增.babelrc文件

webpack-demo
|- config
    |- 略
|- package.json
|- src
    |- 略
|- .babelrc
复制代码
{
    "presets": ["@babel/preset-env"], 
    "plugins": ["@babel/plugin-transform-runtime"] 
}
复制代码
  • presets(设定转码规则):过去需要进行规则集指定,现在使用@babel/preset-env搭配@babel/core解决
  • plugins(插件):transform-runtime 插件表示不管浏览器是否支持ES6,只要是ES6的语法,它都会进行转码成ES5

resolve

这些选项能设置模块如何被解析。在vue开发中通常使用的@/xxx/xxx就是将@符号配置为src目录。这样webpack就能快速的找到该路径,这样的配置不仅可以方便开发,而且可以优化构建时间,减轻webpack的工作量。另外还可以配置后缀名的自动补全。

resolve: {
    extensions: [ '.js', '.vue', '.scss', '.css'], //后缀名自动补全
    alias: {                                       //别名
        '@': path.resolve(__dirname, '../src'),
    }
},
复制代码

vue配置

最后我们进行vue的配置,先安装依赖。

npm i -D vue vue-loader vue-style-loader vue-template-compiler
复制代码
  • vue-loader是vue的loader,vue文件是一个SFC类文件,vue-loader会将其解析成为三部分,template部分用于渲染视图,js,style。
  • vue-style-loader用于处理vue-loader解析后的style.
  • vue-template-compiler用于处理解析解析后的template.

先进行目录改造

webpack-demo
|- config
    |- 略
|- package.json
|- src
    |- components
        |- HelloWorld.vue
    |- views
        |- App.vue
    |- asset
        |- img.png
        |- style.css
    |- index.html
    |- index.js
|- .babelrc
|- package.json
复制代码

webpack.base.js

const path = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const ProgressBarPlugin = require('progress-bar-webpack-plugin');

module.exports = {
    ...略
    module:{
        rules:[
            {
                test: /\.css$/,
                use: [
                    "style-loader",
                    "vue-style-loader",
                    "css-loader"
                ]
            },{
                test: /\.(png|svg|jpg|gif)$/,
                use:'url-loader',
                
            },{
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
            },{
                test:/\.vue$/,
                use: 'vue-loader'
            }
        ]
    },
    plugins:[
        new VueLoaderPlugin(),
        new HtmlWebpackPlugin({
            filename: './index.html',     //文件名
            template: './src/index.html', //模板文件
        })    
    ]
}
复制代码

在这里我们还需要安装VueLoaderPlugin(),并且需要进行HtmlWebpackPlugin的重新配置,我们需要使用自己的template,因为必须创建一个div入口,将vue实例挂载在这上面。按原来方式使用该插件的话,无法创建div入口。

index.html

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>webpackStudy</title>
</head>
<body>
    <div id="root"></div>
</body>
</html>
复制代码

index.js

import Vue from 'vue'
import App from './views/APP'
import '@/asset/style'

new Vue({
    el:'#root',
    render: h => h(App)
})
复制代码

HelloWorld.vue

<template>
    <div>
        <img src="../asset/img.png" alt="">
        <p>一起学习前端吧</p>
    </div>
</template>

<script>
export default {

}
</script>

<style scoped>
p{
    font-size: 50px;
}
</style>
复制代码

App.vue

<template>
  <div id="app">
    <hello-world></hello-world>
  </div>
</template>

<script>
import HelloWorld from '@/components/HelloWorld'

export default {
  name: "App",
  components: {
    HelloWorld
  }
};
</script>
复制代码
  • index.js依旧是我们的webpack入口文件,我们将css文件和APP.vue入口文件引入,进行vue实例化,挂载在root节点上(index.html文件的root节点)。
  • 然后就可以开始组件开发啦。

小工具

当我们的组件躲起来了以后,webpack 打包非常耗时,我们来安装一个ProgressBarPlugin来查看打包进度。

npm i -D progress-bar-webpack-plugin
复制代码
plugins:[
    new ProgressBarPlugin()//打包进度条
]
复制代码

github

源码在我的github仓库step2分支,希望能够帮助到大家。

END

webpack这个技能栈将会是前端工程师必备的,对于小白来说,刚开始可能会不太好理解,其实不用把他看到太难,就是文件从哪来到哪里去的一个打包工具而已,我们所做的只是把他的各个模块的从哪来到哪去的问题配好,将每一部分都弄懂。接下来需要做的就是在此基础上进行开发了。

关注下面的标签,发现更多相似文章
评论