webpack4构建vue项目(二)

栏目: 编程工具 · 发布时间: 4年前

内容简介:距离上篇文章9102年webpack4搭建vue项目已经过了将近两个月了,一直没有时间写文章,公司项目比较多,这两个月一直在加班,最近大家一直在讨论996.icu,其实我想发表一点自己的看法,关于加班我的座右铭一直是:只要工资给到位,加班无所谓。尴尬的就是我们公司不给加班费,而且不让调休,哈哈哈,相信大多数公司都是如此,所以呢,所以呢,直到今天才能给大家分享文章,想看上篇文章的同学点这里好了废话不多说开始撸代码。新建build文件夹

前言

距离上篇文章9102年webpack4搭建vue项目已经过了将近两个月了,一直没有时间写文章,公司项目比较多,这两个月一直在加班,最近大家一直在讨论996.icu,其实我想发表一点自己的看法,关于加班我的座右铭一直是:只要工资给到位,加班无所谓。尴尬的就是我们公司不给加班费,而且不让调休,哈哈哈,相信大多数公司都是如此,所以呢,所以呢,直到今天才能给大家分享文章,想看上篇文章的同学点这里 juejin.im/post/5c665d…

好了废话不多说开始撸代码。

1.新建文件夹

mkdir wepack-vue //文件名字可以随便复制代码

2.新建package.json文件

npm init -y复制代码

3.webpack配置

新建build文件夹

mkdir build复制代码

build文件夹新建webpack.base.conf.js,webpack.dev.conf.js,webpack.prod.conf.js

  • webpack.base.conf.js 存放公共配置
  • webpack.prod.conf.js 存放生产环境配置
  • webpack.dev.conf.js 存放开发环境配置

创建src文件夹并创建main.js

创建index.html

<!DOCTYPE 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>webpack搭建vue项目</title>
</head>
<body>
    <div id="app"></div>
</body>
</html>复制代码

下载webpack webpack-dev-server webpack-cli

npm i webpack webpack-dev-server webpack-cli -D复制代码

打开webpack.base.config.js,并配置webpack整体属性

var path = require('path');
var webpack = require('webpack');
module.exports = {
    entry: {
        main: path.resolve(__dirname, '../src/main.js')
    },
    output: {
        path: path.resolve(__dirname, '../src'),
        filname: '[name].[bash].js',
    },
    module: {
        rules: []
    },
    pligins: [
                new webpack.HashedModuleIdsPlugin(), // 解决vender后面的hash每次都改变
             ],
    resolve: {

    }
}复制代码

4.配置loader

  • 下载babel-loader,babel-core,babel-preset-dev,rules并配置js

babel-preset-env 帮助我们配置 babel。我们只需要告诉它我们要兼容的情况(目标运行环境),它就会自动把代码转换为兼容对应环境的代码。

babel-core是作为babel的核心存在,babel的核心api都在这个模块里面

tips: babel是7.X的话babel-core必须是6.X,否则不兼容

npm i babel-loader babel-core babel-preset-env@7 -D复制代码
rules:[
    {
        test: /\.js$/,
        use: ['babel-loader'],
        exclude: /node_modules/
    }
]复制代码
  • 新建.babelrc文件,.babelrc是babel全局配置文件
{
    "preset": [
                ['env',{
                        "targets":  {// 指定转译到那个环境
                            //浏览器环境                            
                            "browsers": ["> 1%", "last 2 versions", "not ie <= 8"],
                        },
                        //是否将ES6的模块化语法转译成其他类型
                        "modules": false
                 }]
            ]
}复制代码
  • 下载file-loader,rules并配置文件(图片和字体)
npm i file-loader -D复制代码
rules:[
    {
        test: /\.(jpg|png|svg|gif)$/,
        use: ['file-loader']
    },
  {
        test: '/\.(woff|woff2|eot|ttf|otf)$/',
        use: ['file-loader']
   },]复制代码
  • 下载css-loader,vue-style-loader,sass-loader, node-sass,并配置css,scss,sass
npm i css-loader vue-style-loader sass-loader node-sass -D复制代码
rules:[
    {
        test: /\.(sa|sc|c)ss$/,
        use: [
                {loader: 'vue-style-loader'},
                'css-loader',
                'sass-loader'
              ]
    },
  ]复制代码
  • 下载less,less-loader,并配置less
npm i less-loader less -D复制代码
rules:[
    {
        test: /\.less$/,
        use: [
                {loader: 'vue-style-loader'},
                'css-loader',
                'less-loader'
              ]
    },
  ]复制代码

5.生成html文件

  • 下载html-webpack-plugin,并配置
npm i html-webpack-plugin -D复制代码
// 引入html-webpack-plugin
var HtmlWebpackPlugin = require('html-webpack-plugin');
plugins: [
    new HtmlWebpackPlugin({
        template: path.resolve(__diename, '../index.html')
    }),
]复制代码

6.配置解析模块

resolve: {
    // 能够使用户在引入模块时不带扩展
    extensions: ['.js', '.json', '.vue', 'css']
}复制代码

base模块配置了一些东西但没有配置完,会在后边一点一点加上,接下来配置dev和prod

7.配置webpack.dev.conf

  • 下载 webpack-merge
npm i webpack-merge -D复制代码
  • webpack.dev.js
var merge = require('webpack-merge');
var baseConfig = require('./webpack.base.conf');
var path = require('path');
var webpack = reuire('webpack');
module.exports = merge(baseConfig, {
    devtool: 'inline-source-map', // 压缩方式
    mode: 'development'
    devServer: {
     hot: true, // 热更新
     open: true, // 自动打开页面
     contentBase: path.resolve(__dirname, '../dist'), // 告诉服务从哪提供内容
    },
    plugins: [
        new.webpack.HotModuleReplacementPlugin(), //开启热更新
    ]
})复制代码

8.配置webpack.prod.conf

  • webpack.prod.conf.js
var merge = require('webpack-merge');
var baseConfig = require('./webpack.base.conf');
var path = require('path');
var webpack = reuire('webpack');
module.exports = merge(baseConfig, {
    devtool: 'source-map', // 压缩方式
    mode: 'production'
    plugins: [
    ]
})复制代码

9.配置vue-loader

  • 下载vue-loader,vue,vue-template-compiler, 并配置vue解析文件,配置webpack.base.cond.js
npm i vue vue-loader vue-template-compiler -D
复制代码
var VueLoaderPlugin = require('vue-loader/lib/plugin');
// 省略代码......
rules:[
    {
        test: /\.vue$/,
        use: ['vue-loader'],
        exclude: /node_modules/
    },
  ]
// 省略代码.......复制代码
// 省略代码....
plugins: [
    new VueLoaderPlugin(), // 它的职责是将你定义过的其它规则复制并应用到 .vue 文件里相应语言的块
]
// 省略代码...复制代码
  • 配置vue别名,确保webpack可以找到.vue文件
// 省略代码...
reslove: {
    alias: [
        'vue$': 'vue/dist/vue.esm.js', //配置别名 确保webpack可以找到.vue文件
        '@': path.resolve(__dirname, '../src')
    ]
}复制代码
  • 新建App.vue文件
<template>
    <div>{{str}}</div>
</template>
<script>
export default {
  name: 'App',
  data () {
    return {
      str: 'hello'
    }
  }}
</script>
<style>
div {
  color: red;
}
</style>
复制代码
  • 在main.js中引入vue
import VUe from 'vue'
import App from './App'

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

10.配置命令

  • 找到package.json文件,并配置开发和打包命令
// 省略代码。。。
"scripts": {
  "dev": "webpack-dev-server  --progress --config build/webpack.dev.conf.js",
   "build": "webpack --config build/webpack.prod.conf.js"
  }复制代码
  • 运行项目
npm run dev复制代码

可以看到项目已经跑起来了

webpack4构建vue项目(二)

11. 区分环境引入不同地址

  • 新建config文件夹并新建dev.ev.js和prod.env.js

dev.env.js 开发环境配置

'use strict'

module.exports = {
    NODE_ENV: '"development"',
    BASE_API: '"http://1456"',
}复制代码

prod.env.js 生产环境配置

'use strict'

module.exports = {
    NODE_ENV: '"production"',    BASE_API: '"http://123.com"',
}复制代码

12.优化webpack配置

  • 解决更改文件打包时dist文件没有清除,再次打包。

下载clean-webpack-plugin,并配置webpack.prod.conf.js文件

npm i clean-webpack-plugin -D复制代码
// 引入clean-webpack-plugin
var CleanWebpackPlugin = require('clean-webpack-plugin');
// 省略代码。。。。
plugins: [
    new CleanWebPackPlugin();
]复制代码
  • 根据不同环境提取css

下载mini-css-extract-plugin,并配置webpack.prod.conf.js文件

npm i mini-css-extract-plugin -D复制代码

更改webpack.prod.conf.js中使用vue-style-loader的代码,更改为

module: {
        rules: [
            {
                test: /\.(c|sc|sa)ss$/,
                use: [
                  {
                    loader: MiniCssExtractPlugin.loader,
                  },
                  'css-loader',
                  'sass-loader'
                ]
            },
            {
            test: /\.less$/,
            use: [
                {
                loader: MiniCssExtractPlugin.loader,
                },
                'css-loader',
                'less-loader'
                ]
            }
        ]
    },
复制代码

在webpack.prod.conf.js的plugin中配置

new MiniCssExtractPlugin({
    filename: '[name].[hash].js'
})复制代码

webpack.base.conf.js中删除使用vue-style-loader的代码,并在webpack.dev.conf.js中定义

module: {
    rules: [
      {
        test: /\.(c|sc|sa)ss$/,
        use: [
          {
            loader: 'vue-style-loader',
          },
          'css-loader',
          'sass-loader'
        ]
      },
      {
        test: /\.less$/,
        use: [
          {
            loader: 'vue-style-loader',
          },
          'css-loader',
          'less-loader'
         ]
      }
    ]
  },复制代码

这个配置vue-loader中有提到 vue-loader.vuejs.org/zh/guide/ex…

  • 第三方库单独打包

把依赖的第三方库抽取出来单独打包,加快打包进度

下载autodll-webpack-plugin

npm i autodll-webpack-plugin -D复制代码

在webpack.base.conf.js中配置

var AutodllWebpackpackPlugin = require('autodll-webpack-plugin');
plugins: [
    new AutodllWebpackpackPlugin ({
        inject: true,
        debugger: true,
        filename: '[name].js',
        path: './dll',
        entry: {
            vendor: ['vue']
        }
    })
]复制代码

tips: inject 为 true,插件会自动把打包出来的第三方库文件插入到 HTML。 filename 是打包后文件的名称。 path 是打包后的路径。 entry 是入口, vendor 是你指定的名称,数组内容就是要打包的第三方库的名称,不要写全路径,Webpack 会自动去 node_modules 中找到的。

  • 提取公共代码

在 webpack.base.conf.js的 plugins 属性中添加如下插件对象

new webpack.optimize.SplitChunksPlugin()复制代码
  • 打包时压缩js和css

下载optimize-css-assets-webpack-plugin和uglifyjs-webpack-plugin

npm i uglifyjs-webpack-plugin uglifyjs-webpack-plugin -D复制代码

在webpack.prod.conf.js中分别引入optimize-css-assets-webpack-plugin和uglifyjs-webpack-plugin并增加optimization

var OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
var UglifyJsPlugin = require("uglifyjs-webpack-plugin");
// ...省略号 
    optimization: {
                minimizer: [
          // 压缩JS
          new UglifyJsPlugin({
            uglifyOptions: {
              compress: {
                warnings: false, // 去除警告
                drop_debugger: true, // 去除debugger
                drop_console: true // 去除console.log
              },
            },
            cache: true, // 开启缓存
            parallel: true, // 平行压缩
            sourceMap: false // set to true if you want JS source maps
          }),
          // 压缩css
          new OptimizeCSSAssetsPlugin({})
        ]
    },复制代码
  • css自动加前缀

下载postcss-loader 和autoprefixer

npm i postcss-loader autoprefixer -D复制代码

分别在webpack.dev.conf.js和webpack.prod.conf.js的use中添加 postcss-loader

use: [
    'postcss-loader'
]复制代码

在项目下增加postcss.config.js

// 配置cssz加前缀
module.exports = {
  plugins: [
    require('autoprefixer')
  ]
}复制代码

以上配置的项目就可以跑起来了,谢谢大家,如有错误,敬请指出,一起在 码农 的道路上越走越远

感恩骗点star项目地址 github.com/mr-mengbo/w…

占位

下一篇会介绍vue搭建后台项目


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Netty实战

Netty实战

诺曼·毛瑞尔(Norman Maurer)、马文·艾伦·沃尔夫泰尔(Marvin Allen Wolfthal) / 何品 / 人民邮电出版社 / 2017-5-1 / 69.00

编辑推荐 - Netty之父”Trustin Lee作序推荐 - 阿里巴巴中间件高级技术专家为本书中文版作序推荐 - 系统而详细地介绍了Netty的各个方面并附带了即用型的优质示例 - 附带行业一线公司的案例研究 - 极实用的Netty技术书 无论是构建高性能的Web、游戏服务器、推送系统、RPC框架、消息中间件还是分布式大数据处理引擎,都离不开Nett......一起来看看 《Netty实战》 这本书的介绍吧!

CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具