备案控制台
探索云世界
开发者社区 开发与运维 文章 正文

webpack4配置vue环境和一些小坑。

2018-06-14 3404
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：

初始化一些文件和依赖

新建一个testwebpack的文件夹。 
然后在该文件夹下：

npm init
  • 1

这时候会出现一个pack.json文件。

npm i webpack vue vue-loader
  • 1

这时候警告如下： 
npm WARN vue-loader@15.2.4 requires a peer of css-loader@* but none is installed. You must install peer dependencies yourself. 
npm WARN vue-loader@15.2.4 requires a peer of vue-template-compiler@^2.0.0 but none is installed. You must install peer dependencies yourself.

需要安装css-loader 和vue-template-compiler。

npm i css-loader vue-template-compiler
  • 1

新建文件夹：

  • src > app.vue(根文件)
<template>
  <div id="app">
    {{text}}
  </div>
</template>

<script>
export default {
  name: 'App',
  data () {
    return {
      text: 'this is test'
    }
  }
}
</script>

<style scoped>
  #app {
    color: red;
  }
</style>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • src > index.js (主入口)
import Vue from 'vue'
import App from './app.vue'
const root = document.createElement('div')
document.body.appendChild(root)

new Vue({
  render: (h) => h(App)
}).$mount(root)
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

新建webpack.config.js

const path = require('path')

module.exports = {
  entry: path.join(__dirname, 'src/main.js'),
  output: {
    filename: 'bundle.js',
    path: path.join(__dirname, 'dist')
  }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

package.js > script下添加代码如下： 
因为只有在这里配置了，才能运行内部的webpack

"build": "webpack --config webpack.config.js"
  • 1

此时在端口运行npm run build

提示如下： 
One CLI for webpack must be installed. These are recommended choices, delivered as separate packages 
webpack4需要依赖webpack-cli

webpack-cli
  • 1

安装好之后报错如下：

1、The ‘mode’ option has not been set, 
webpack4里面需要声明mode来判断是生产环境还是开发环境 
详见官网：https://webpack.js.org/concepts/mode/ 
修改build：

"build": "webpack --mode=production --config webpack.config.js"
  • 1

2、You may need an appropriate loader to handle this file type. 
这个报错说明需要配置loader 
配置必要的loader：

module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  },
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

此时继续npm run build 
报错如下：

vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config.

提示webpack4配置需要包含VueLoaderPlugin

const VueLoaderPlugin = require('vue-loader/lib/plugin')
  • 1

然后在输出里面配置plugins：

plugins: [
    new VueLoaderPlugin()
]
  • 1
  • 2
  • 3

此时发现还有报错，原因很简单，没有安装style-loader.

npm i style-loader
  • 1

这时候就可以正常的 run build 了。

配置图片资源的打包、css预处理器等

新建文件src>assets>image&&src>assets>styles

这里写图片描述

然后配置loader：

,
      {
        test: /\.(jpg|jpeg|svg|png|gif)$/,
        use: {
          loader: 'url-loader',
          options: {
            limit: 1024,
            filename: '[name].[ext]'
          }
        }
      },
      {
        test: /\.styl$/,
        use: [
          'style-loader',
          'css-loader',
          'stylus-loader'
        ]
      }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19

安装loader：

npm i stylus stylus-loader url-loader file-loader
  • 1

此时，就基本完成基本配置了。

devServer的使用

package.js俩面的script配置如下：

"dev": "webpack-dev-server --mode=development --config webpack.config.js"
  • 1

webpack.config.js里面进行一些判断，确定是生产环境还是开发环境： 
如何判断呢？安装一个cross-env 的包

 npm i cross-env
  • 1

修改package.js内容如下：

"build": "cross-env NODE_ENV=production webpack --mode=production --config webpack.config.js",
"dev": "cross-env NODE_ENV=development webpack-dev-server --mode=development --config webpack.config.js"
  • 1
  • 2

然后在weback.config.js定义一个变量：

const isDev = process.env.NODE_ENV === 'development'
  • 1

如果这个变量为真，则做如下操作：

if (isDev) {
  config.devtool = '#cheap-module-eval-source-map',
  config.devServer = {
    port: 8000,
    host: '0.0.0.0',
    overlay: {
      errors: true
    //热加载
    hot: true
  },
  //下面是不刷新更新内容
  config.plugins.push(
    new webpack.HotModuleReplacementPlugin(),,
    new webpack.NoEmitOnErrorsPlugin()
  )
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16

这时候还需要一个html来展示，

const HTMLPlugin = require('html-webpack-plugin')
  • 1
plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: isDev ? '"development"' : '"production"'
      }
    }),
    new VueLoaderPlugin(),
    new HTMLPlugin()
  ],
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

到这里，基本配置就已经完成了。

postCss、babel-loader使用

npm i postcss autoprefixer babel-loader babel-core
  • 1
  1. postcss: 后处理css的作用

aotuprefixer

const autoorefixer = require('autoprefixer')

module.exports = {
  plugins: [
    autoprefixer()
  ]
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

2.vue中使用jsx

npm i babel-env babel-plugin-transform-vue-jsx
  • 1

rules添加如下：

{
        test: /\.jsx$/,
        loader: 'babel-loader'
      },
  • 1
  • 2
  • 3
  • 4
{
        test:/\.styl$/,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              sourceMap: true
            }
            //选项的作用使用来提高效率的。
          },
          'stylus-loader'
        ]
      },
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

这里我遇到一个坑，最后在官方文档找到了。

test:/\.styl$/,
  • 1

使用上面的配置无法解析vue中的stylus，需要向下面这样配置：

test:/\.styl(us)?$/,
  • 1

这样就可以了。

正式打包的时候，如何分离css文件

npm install --save-dev extract-text-webpack-plugin
  • 1

webpack4升级后，使用这个会有很多坑，如下：

开发环境的rules不变：

if (isDev) {
  config.module.rules.push(
    {
      test: /\.styl(us)?$/,
      use: [
        'style-loader',
        'css-loader',
        {
          loader: 'postcss-loader',
          options: {
            sourceMap: true,
          }
        },
        'stylus-loader'
      ]
    }
  )
  // 开发环境就这样就可以了
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18

如果是生产环境：

else {
  config.output.filename = '[nams].[chunkhash:8].js'
  // 生产环境必须是chunkhash
  config.module.rules.push(
    {
      test: /\.styl(us)?$/,
      use: ExtractTextPlugin.extract({
        fallback: "style-loader",
        use: [
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              sourceMap: true,
            }
          },
          'stylus-loader'
        ]
      })
    }
  )
  config.plugins.push(
    // new ExtractTextPlugin("styles.[ontentHash:8].css")
    new ExtractTextPlugin('styles.[hash:8].css')
    // 根据内容得到hash值
  )
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27

坑1： 
webpack4不支持extract-text-webpack-plugin3.0版本，需要使用4.0-beat版本：

npm i extract-text-webpack-plugin@next
  • 1

坑2：

config.plugins.push(
    // new ExtractTextPlugin("styles.[ontentHash:8].css")
    new ExtractTextPlugin('styles.[hash:8].css')
    // 根据内容得到hash值
  )
  • 1
  • 2
  • 3
  • 4
  • 5

这里不能使用style.[contentHash:8].css

到这里最终编译成功~

单独打包vue代码

config.entry = {
    app: path.join(__dirname, 'src/index.js'),
    vendor: ['vue']
  }
  • 1
  • 2
  • 3
  • 4
config.optimization = {
    splitChunks: {
      cacheGroups: {
        commons: {
          chunks: 'initial',
          minChunks: 2,
          maxInitialRequests: 5,
          minSize: 0
        },
        vendor: {
          test: /node_modules/,
          chunks: 'initial',
          name: 'vendor',
          priority: 10,
          enforce: true
        }
      }
    },
    runtimeChunk: true
原文发布时间：
原文作者：simoonQian
本文来源CSDN博客如需转载请紧急联系作者

文章标签：
前端开发
JavaScript
关键词：
Webpack配置
Webpack环境
VUE.js配置
VUE.js环境
VUE.js webpack
凤囚凰丶
目录
相关文章
Z_B_L
|
3月前
vue3-admin-element-template配置正向代理报错
vue3-admin-element-template配置正向代理报错
Z_B_L
34 0
iOS学霸
|
3月前
|
移动开发 JavaScript 安全
Vue 应用程序性能优化：代码压缩、加密和混淆配置详解
Vue 应用程序性能优化：代码压缩、加密和混淆配置详解
iOS学霸
38 0
Boale_H
|
1月前
vue3配置路由报错Catch all routes (“*“) must now be defined using a param with a custom regexp.
vue3配置路由报错Catch all routes (“*“) must now be defined using a param with a custom regexp.
Boale_H
43 0
童小纯
|
2月前
|
Web App开发 JSON 前端开发
Webpack【搭建Webpack环境、Webpack增加配置文件、Webpack中使用Loader、Webpack分离CSS文件 】(一)-全面详解（学习总结---从入门到深化）
Webpack【搭建Webpack环境、Webpack增加配置文件、Webpack中使用Loader、Webpack分离CSS文件 】(一)-全面详解（学习总结---从入门到深化）
童小纯
51 0
童小纯
|
3月前
|
JSON 前端开发 JavaScript
Webpack【搭建Webpack环境、Webpack增加配置文件、Webpack中使用Loader、Webpack分离CSS文件 】(一)-全面详解（学习总结---从入门到深化）（上）
Webpack【搭建Webpack环境、Webpack增加配置文件、Webpack中使用Loader、Webpack分离CSS文件 】(一)-全面详解（学习总结---从入门到深化）
童小纯
56 0
微芒不朽
|
3天前
|
JavaScript 测试技术
vue不同环境打包环境变量处理
vue不同环境打包环境变量处理
微芒不朽
13 0
微芒不朽
|
3天前
|
JavaScript
vue3+vite项目配置ESlint
vue3+vite项目配置ESlint
微芒不朽
6 0
Boale_H
|
1月前
|
存储 前端开发 文件存储
webpack成长指北第5章---webpack的基础配置
webpack成长指北第5章---webpack的基础配置
Boale_H
25 0
曲鸟
|
2月前
Vue3使用路由及配置vite.alias简化导入写法
Vue3使用路由及配置vite.alias简化导入写法
曲鸟
46 0
会敲代码的_TT
|
2月前
|
JavaScript 前端开发 API
从Vue 2到Vue 3：深入了解路由配置的变化与升级建议
欢迎阅读本篇文章，我们将带您深入探索Vue 2和Vue 3的路由配置。在现代前端开发中，路由是构建交互式Web应用程序不可或缺的一部分。Vue.js作为一种流行的JavaScript框架，在版本2和版本3之间进行了重大改进和升级。
会敲代码的_TT
44 0

热门文章

最新文章

  • 1
    vue3快速上手
  • 2
    Vue3——Router4教程(小满版本)（二）
  • 3
    VUE获取上月、当月、前几月等等问题
  • 4
    vue利用级联选择器实现全国省市区乡村五级菜单联动
  • 5
    Vue3项目中使用vue-router
  • 6
    Vue.js学习详细课程系列--共32节（1 / 6）
  • 7
    vue实现下拉列表远程搜索示例（根据关键词模糊搜索）
  • 8
    vue element plus 快速开始
  • 9
    Vue.js学习详细课程系列--共32节（4 / 6）
  • 10
    【vue报错】error:0308010C:digital envelope routines::unsupported
  • 1
    webpack如何设置devServer启动项目为https协议
    136
  • 2
    webpack成长指北第9章---webpack如何对icon字体进行打包
    28
  • 3
    webpack成长指北第8章---webpack的CSS Modules打包
    19
  • 4
    webpack成长指北第7章---webpack的css\less\scss样式打包
    41
  • 5
    webpack成长指北第6章---webpack的图片引入
    20
  • 6
    webpack成长指北第5章---webpack的基础配置
    25
  • 7
    webpack成长指北第3章---常用webpack命令及使用webpack命令的方式
    22
  • 8
    webpack成长指北第2章---安装webpack的正确姿势
    16
  • 9
    深入理解前端性能优化中的Webpack Tree Shaking
    20
  • 10
    Webpack 进阶：深入理解其工作原理与优化策略
    43

    • 相关课程

    更多
  • Spring Boot+Vue.js+FastDFS实现分布式图片服务器
  • 前端自动化构建工具 Webpack
  • Vue.js 入门与实战
  • Vue.js完全自学手册图文教程
  • Python Web 框架 Flask 快速入门
  • Python Web 框架 Django 快速入门

    • 相关电子书

    更多
  • 基于webpack和npm的前端组件化实践
  • Vue.js 在前端服务化上的探索与实践
  • Vue.js在前端服务化上的实践与探索

    • 相关实验场景

    更多
  • Html5和Webpack3：Webpack5的常见用法
  • Html5和Webpack2：Webpack5打包JS和样式表
  • Html5和Webpack1：Webpack5打包工具介绍
  • 前端开发基础6：Node.js和LESS预编译工具
  • WEB网页编程实战
  • Web Terminal环境使用指南
    • 下一篇
    阿里云oss简介和使用流程