webpack yarn 构建项目_yarn创建的项目 webpack.config.js - CSDN
精华内容
参与话题
  • vue-cli3+webpack热更新失效问题

    千次阅读 2019-06-10 18:49:16
    1、起因 A项目中遇到问题,热更新失效,百思不得其解,查询搜索vuecli3...npm安装yarn,再用yarn重新install,yarn serve启动,在npm run serve 启动等方法都不好用。github有类似问题https://github.com/vuejs/vue-...

    1、起因

    A项目中遇到问题,热更新失效,百思不得其解,查询搜索vuecli3热更新失效、vue histroy 模式热更新失效,网上看到不少方法,npm重新安装,不要用淘宝镜像cnpm安装;npm安装yarn,再用yarn重新install,yarn serve启动,在npm run serve 启动等方法都不好用。github有类似问题https://github.com/vuejs/vue-cli/issues/1559,有次得到启发可能版本不同导致。

    对比热更新正常的项目B的几个配置文件,重点查看package.json文件,发现有webpack版本不同

    2、解决方案

    初步断定是webpack版本原因,搜索关键词就变成了webpack4.0热更新失效,webpack4.0热更新开启由此查询查询尝试。原因大概是webpack4.0需要手动配置开启热更新,默认没有开启

    2.1、局部安装依赖webpack-dev-server
     

    npm install --save-dev webpack-dev-server

    2.2、在webpack.config.js配置相关参数

    增加devServer的配置

    const path = require('path');
    
    module.exports = {
        entry: './index.js',
        output: {
            path: path.resolve(__dirname, 'dist'),
            filename: 'youname.js'
        },
        plugins: [
        ],
        devServer: {
            contentBase: path.join(__dirname, 'page'),
            compress: true,
            port: 8080
        }
    };

    2.3、在package.json中的scripts对象添加命令,开启本地服务

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

     如果server有其他命令执行,在后面增加这一句命令就可以了

     

    2.4、vue.config.js配置,开启热更新

     devServer: {
            disableHostCheck: true,//webpack4.0 开启热更新
     }

     

    2.5、最后执行npm run server即可,热更新失效问题解决

     

    展开全文
  •  在项目实现的过程中,想在代码更改的同时,查看效果的改变,而这个时候长时间的编译等待,造成了额外的时间浪费。 2、简介  HardSourceWebpackPlugin是webpack的插件,为模块提供中间缓存步骤。为了查看结果,...

    1、背景

          在项目实现的过程中,想在代码更改的同时,查看效果的改变,而这个时候长时间的编译等待,造成了额外的时间浪费。

    2、简介

       HardSourceWebpackPlugin是webpack的插件,为模块提供中间缓存步骤。为了查看结果,您需要使用此插件运行webpack两次:第一次构建将花费正常的时间。第二次构建将显着加快(大概提升90%的构建速度)。

    3、实现

           用npm install --save-dev hard-source-webpack-plugin或安装yarn add --dev hard-source-webpack-plugin。并在webpack的插件配置中添加此插件。

    const HardSourceWebpackPlugin = require('hard-source-webpack-plugin')
    new HardSourceWebpackPlugin({
        // cacheDirectory是在高速缓存写入。默认情况下,将缓存存储在node_modules下的目录中,因此如 
        // 果清除了node_modules,则缓存也是如此
        cacheDirectory: 'node_modules/.cache/hard-source/[confighash]',
        // Either an absolute path or relative to webpack's options.context.
        // Sets webpack's recordsPath if not already set.
        recordsPath: 'node_modules/.cache/hard-source/[confighash]/records.json',
        // configHash在启动webpack实例时转换webpack配置,并用于cacheDirectory为不同的webpack配 
        // 置构建不同的缓存
        configHash: function(webpackConfig) {
           // node-object-hash on npm can be used to build this.
           return require('node-object-hash')({sort: false}).hash(webpackConfig);
        },
        // 当加载器,插件,其他构建时脚本或其他动态依赖项发生更改时,hard-source需要替换缓存以确保输 
        // 出正确。environmentHash被用来确定这一点。如果散列与先前的构建不同,则将使用新的缓存
        environmentHash: {
           root: process.cwd(),
           directories: [],
           files: ['package-lock.json', 'yarn.lock'],
        },
    })

    参考:http://npm.taobao.org/package/hard-source-webpack-plugin

    展开全文
  • 用react脚手架构建项目,执行yarn eject暴露webpack配置文件是报错 报错截图 解决方法:依次执行以下命令 git add . git commit -m “init” yarn eject

    用react脚手架构建项目,执行yarn eject暴露webpack配置文件时报错

    报错截图
    在这里插入图片描述

    解决方法:依次执行以下命令

    1. git add .
    2. git commit -m “init”
    3. yarn eject
    展开全文
  • webpack之自动编译的三种方式

    千次阅读 2018-08-26 01:03:22
    每次编译代码时,需要手动输入yarn run build,挺麻烦的,有没有自动编译的方式呢?还真有,如下三种: 自动编译方式 webpack’s Watch Mode 观察模式 webpack-dev-server web服务器 webpack-dev-middleware ....

    前言

    每次编译代码时,需要手动输入yarn run build,挺麻烦的,有没有自动编译的方式呢?还真有,如下三种:
    

    自动编译方式

    1. webpack’s Watch Mode 观察模式
    2. webpack-dev-server web服务器
    3. webpack-dev-middleware webpack中间件

    观察模式

    在package.json中添加观察模式的npm script脚本

    "scripts": {
        "watch": "webpack --watch",
        "build": "webpack"
     }
    启动:yarn run watch
    优点:自动编译
    缺点:需手动刷新浏览器
    

    web服务器

    添加web服务器插件
    yarn add webpack-dev-server -D
    在package.json中添加web服务器的npm script脚本
    
    "scripts": {
        "watch": "webpack --watch",
        "build": "webpack",
        "dev": "webpack-dev-server --open"
     }
    在webpack.config.js配置文件中添加devServer配置项
    
    const path = require('path')
    const HtmlWebpackPlugin = require('html-webpack-plugin')
    const CleanWebpackPlugin = require('clean-webpack-plugin')
    const ManifestPlugin = require('webpack-manifest-plugin')
    
    const HOST = process.env.HOST
    const PORT = process.env.PORT && Number(process.env.PORT)
    
    module.exports = {
      // 多入口,根据入口起点名称动态生成bundle名称
      entry: {
        app: './src/index.js',
        print: './src/print.js'
      },
      // 开发服务器,实时重新加载
      devServer: {
        contentBase: './dist'
      },
      plugins: [
        // 每次构建前清理dist文件夹
        new CleanWebpackPlugin(['dist']),
        // html-webpack-plugin插件默认生成index.html文件
        new HtmlWebpackPlugin({
          title: 'Document'
        })
      ],
      output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist')
      }
    }
    启动:yarn run dev
    优点:自动编译+实时重新加载浏览器
    

    webpack中间件

    添加webpack中间件和express
    yarn add express webpack-dev-middleware -D
    在package.json中添加web服务器的npm script脚本
    
    "scripts": {
        "watch": "webpack --watch",
        "build": "webpack",
        "dev": "webpack-dev-server --open",
        "server": "node server.js"
     }
    webpack.config.js
    
    const path = require('path')
    const HtmlWebpackPlugin = require('html-webpack-plugin')
    const CleanWebpackPlugin = require('clean-webpack-plugin')
    const ManifestPlugin = require('webpack-manifest-plugin')
    
    const HOST = process.env.HOST
    const PORT = process.env.PORT && Number(process.env.PORT)
    
    module.exports = {
      // 多入口,根据入口起点名称动态生成bundle名称
      entry: {
        app: './src/index.js',
        print: './src/print.js'
      },
      plugins: [
        // 每次构建前清理dist文件夹
        new CleanWebpackPlugin(['dist']),
        // html-webpack-plugin插件默认生成index.html文件
        new HtmlWebpackPlugin({
          title: 'Output Management'
        })
      ],
      output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist'),
        // 输出解析文件的目录
        publicPath: '/'
      }
    }
    server.js  启动服务器
    
    const express = require('express')
    const webpack = require('webpack')
    const webpackDevMiddleware = require('webpack-dev-middleware')
    
    const app = express()
    const config = require('./webpack.config.js')
    const compiler = webpack(config)
    
    // 告诉express使用webpack中间件和webpack配置文件
    app.use(webpackDevMiddleware(compiler, {
      publicPath: config.output.publicPath
    }))
    
    app.listen(8080, () => {
      console.log('listening on port 8080\n')
    })
    启动:yarn run server
    优点:自动编译
    缺点:需手动刷新浏览器+配置文件和插件多
    

    总结

    1. 观察模式在开发中不实用
    2. web服务器力压群雄,实用性强,强烈推荐,vue-cli搭建以webpack搭建的模板就是使用web服务器
    3. webpack中间件+express,使用2个插件,2个配置文件(webpack.config.js+server.js),配置复杂。
    展开全文
  • 使用yarn代替npm构建Vue项目

    万次阅读 2019-10-04 17:04:44
    看到这个标题的时候,相信有些小伙伴会带有疑问,为什么明明可以使用npm来构建vue项目,现在却偏偏要使用yarn呢? 最简单最直接的原因是因为它快!并且要比你用npm快很多! 如果你想了解的更全面,我们来看yarn官方...
  • create-react-app是由 React 官方提供并推荐使用构建新的 React 单页面应用程序的最佳方式,不过目前版本(1.5.x)其构建项目中默认是不支持动态样式语言Less的。如果我们的项目必须要使用 Less 呢,这就需要我们...
  • react自动启动浏览器webpack配置

    千次阅读 2019-03-05 21:26:40
    第一步操作安装启动浏览器插件 下面用 yarn 或者 npm 都可以安装 $ yarn add open-browser-webpack-plugin --sava-dev $ npm install open-browser-webpack-plugin --sava-dev 第二步 //webpackconfig 文件配置 ...
  • webpack打包分析与性能优化

    千次阅读 2018-01-02 09:46:57
    在去年年末参与的一个项目中,项目技术栈使用react+es6+ant-design+webpack+babel,生产环境全量构建将近三分钟,项目业务模块多达数百个,项目依赖数千个,并且该项目协同前后端开发人员较多,提高webpack 构建效率...
  • webpack工程化小程序开发

    千次阅读 2019-11-19 10:29:39
    webpack编译打包构建小程序webpack工程化小程序开发1、新建项目文件(如:wx-mini)2、创建package.json文件3、安装项目依赖包(或插件包)4、项目目录构建5、在项目个目录下,新建 .babelrc 文件,用来将es6转化为...
  • vue init webpack my-project 选项详解

    万次阅读 2018-11-30 17:28:18
    下载安装node node官网 注: 建议下载长期支持版 查看node及npm版本 node -v ...vue初始化基于webpack的my-project项目 vue init webpack my-project 1.项目名称,如果不需要就直接回车。注:此...
  • 扩展create-react-app的webpack配置

    千次阅读 2019-03-07 17:22:28
    在创建react项目时,我们一般用create-react-app脚手架来搭建项目。 create-react-app对webpack的配置进行了封装并默认隐藏了配置文件。 当我们需要对webpack的配置进行扩展时,需要执行npm run eject命名将配置文件...
  • Webpack4.x 版本入门指南

    千次阅读 2018-03-29 11:14:24
    本文是基于一位以前公司的同事zzj所写的 Webpack入门指南 这篇文章做构建。本文是基于win环境搭建的webpack,以前的同事写的入门指南是webpack3.0版本,最近想用webpack却发现它已经更新到了4.1.x,于是遇到了几个...
  • vue-cli 构建项目中如何使用 Less

    万次阅读 2017-07-16 19:38:33
    vue-cli 构建项目默认是不支持 less 的,需要自己添加。首选,安装 less 和 less-loader ,在项目目录下运行如下命令npm install less less-loader --save-dev当然,比起 npm,我个人更喜欢用 yarnyarn add less ...
  • 前端vonic框架搭建

    千次阅读 2018-08-10 10:40:33
    1.克隆开发脚手架:项目使用Vonic作为UI模板,开发者提供了一个Vonic的开发脚手架,即如下网址:https://github.com/wangdahoo/vonic-webpack-starter 操作命令:git clone ...
  • Webpack 4 入门笔记

    千次阅读 2020-10-12 20:27:13
    Webpack4 入门笔记
  • 升级 webpack 到 4.x 版本

    千次阅读 2018-04-08 12:28:48
    升级 webpack 到 4.x 版本 说明 webpack 4 可以零配置启动,也支持通过配置文件进行更细致的配置,相比于上一个版本,配置已经简化了很多 webpack 4 引入了 mode 用来设置开发环境,同时也可以简化配置项,...
  • vue + webpack 构建项目

    千次阅读 2017-11-21 16:00:52
    vue+webpack项目搭建过程: node是必须的,需要先安装好node 全局查询node -v: 接下来全局安装vue-cli npm install --global vue-cli 安装成功后在项目文件夹下 运行 vue init webpack + 项目名...
  • 更好的维护代码,把 webpack.config.js 拆分成三个部分: 公 共 配 置 : 把 开 发 和 生 产 环 境 需 要 的 配 置 都 集 中 到 公 共 配 置 ...安装yarn add webpack-merge --dev 或者 npm i webpack-merge -D 生产文
  • 2019独角兽企业重金招聘Python工程师标准>>> ...
  • Vue2+VueRouter2+webpack 构建项目实战(五)配置子路由

    万次阅读 多人点赞 2017-08-26 19:44:14
    Vue2+VueRouter2+webpack 构建项目实战(五)配置子路由前情回顾《Vue2+VueRouter2+webpack 构建项目实战(一)准备工作》《Vue2+VueRouter2+webpack 构建项目实战(二)目录以及文件结构》《Vue2+VueRouter2+...
1 2 3 4 5 ... 20
收藏数 3,877
精华内容 1,550
关键字:

webpack yarn 构建项目