精华内容
下载资源
问答
我要提问
  • vue webpack5 配置打包删除console.log
    2021-11-18 15:18:30

    前言

    本文基于 vue-cli 5.0.0-rc.1 版本。

    vue-cli 5 版本已经将 webpack 版本升级为5版本，具体变更可以自行查看 vue-cli 迁移日志 从 Vue CLI v4 到 v5。

    terser-webpack-plugin 插件 vue-cli 自带，无需自己安装，直接配置就可以。

    1.vue-cli 4.x 版本，配置如下

    module.exports = {
  configureWebpack: config => {
    // 环境判断
    if (process.env.NODE_ENV === 'production') {
      // 为生产环境修改配置...
      config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true;
    } else {
      // 为开发环境修改配置...
    }
  }
};

    2.vue-cli 5.x 版本

    相比于 4.x版本，5.x配置变化有如下几个：

    1. drop_console 位置由原来的 terserOptions.compress 变更至 minimizer.options.compress 对象下
    2. drop_console 不在设有默认选项，所以无法通过 . 的方式来配置，需要通过 Object.assign 方法来添加配置
      在这里插入图片描述

    配置如下

    module.exports = {
  configureWebpack: config => {
    // 环境判断
    if (process.env.NODE_ENV === 'production') {
      // 为生产环境修改配置...
      config.optimization.minimizer[0].options.minimizer.options.compress = Object.assign(
        config.optimization.minimizer[0].options.minimizer.options.compress,
        {
          drop_console: true
        }
      );
    } else {
      // 为开发环境修改配置...
    }
  }
};

    如果本篇文章对你有帮助的话，很高兴能够帮助上你。

    当然，如果你觉得文章有什么让你觉得不合理、或者有更简单的实现方法又或者有理解不来的地方，希望你在看到之后能够在评论里指出来，我会在看到之后尽快的回复你。

    javassist
    更多相关内容

  • electron-vue-vite-webpack:Electron、vue3、vite2、webpack5、ant-design-vue2 整合

     2021-05-17 05:13:08
    Electron + vue3 + vite2 + webpack5 + ant-design-vue2 如何和为什么 Vite是未来的脚手架 在开发期间使用“拜访”以保持快速启动的优势 使用“ webpack”解决包装期间的包装问题 命令 npm run dev npm运行构建 ...
    收起

  • vue webpack打包后图片路径错误的完美解决方法

     2020-10-17 15:53:07
    主要介绍了vue webpack打包后图片路径错误的解决方法,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
    收起

  • createVue:webpack5 搭建 vue3 应用

     2021-05-13 09:45:28
    本项目基于 webpack5 搭建 vue3 + ts 项目。 你可以用此项目搭建属于你的项目！！ 熬夜不易，如果您觉得我的文章或者 demo 有用，可以赏我杯咖啡(^_−)☆ webpack4 搭建 vue 项目点 微信 另外，我也做了一个, 分享给...
    收起
    JavaScript

  • Vue webpack 项目自动打包压缩成zip文件的方法

     2020-10-16 16:20:55
    主要介绍了Vue -- webpack 项目自动打包压缩成zip文件的方法，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
    收起

  • framework7-template-vue-webpack：已弃用！ 具有热重载和CSS提取功能的Framework7 Vue Webpack入门应用...

     2021-02-04 15:32:35
    Framework7 Vue + Webpack应用程序模板 具有Webpack设置且具有热重载和CSS提取功能的全功能Framework7 Vue。 基于 用法 1.下载此存储库 git clone https://github.com/framework7io/framework7-template-vue-webpack...
    收起

  • vue和webpack打包项目相对路径修改的方法

     2020-08-27 08:29:05
    主要介绍了vue和webpack打包项目相对路径修改的方法,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    收起

  • Vue项目webpack打包部署到服务器的实例详解

     2020-12-12 20:38:37
    Vue项目webpack打包部署到服务器 这篇博文主要说的就是我今天遇到的问题，而且在经过我的询问，好多人在打包部署的时候都遇到了一些问题，下面就来说下，如何将Vue项目放置在服务器上，这里以Tomcat为例。 必须要...
    收起

  • vue+webpack中配置ESLint

     2020-10-17 18:49:56
    主要介绍了vue+webpack中配置ESLint，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    收起

  • webpack5-vue3:基于Webpack5的Vue3框架

     2021-05-13 21:20:34
    babel-loader 开启缓存（webpack5内置 cache 功能） 忽略打包、按需加载：IngorePlugin 不解析代码：exclude happyPack：多线程打包 提取公共代码和第三方代码 运用 CDN 文件名称使用 内容hash 懒加载 图片引用...
    收起
    JavaScript

  • webpack5vue2

     2021-02-25 09:13:43
    webpack5vue2
    收起
    JavaScript

  • webpack打包vue项目基础配置

     2020-09-26 16:05:01
    基于webpack4的一个针对vue基础项目的打包配置，对基础的vue项目进行简单的打包配置，可以支持less，scss，sass等css预编译，简单明了，教程：https://www.jianshu.com/p/81bfe6ba1c04
    收起

  • 解决vue+webpack打包路径的问题

     2020-08-27 21:37:42
    下面小编就为大家分享一篇解决vue+webpack打包路径的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    收起

  • vue-webpack多模块

     2018-05-02 16:33:22
    vue项目里多个模块并存，多模块打包生成单独项目，webpack-cli
    收起

  • vue init webpack 建vue项目报错的解决方法

     2020-12-11 15:27:51
    使用vue init webpack 创建vue项目时报如下错误： vue init webpack my-project C:\Users\computer\AppData\Roaming\npm\node_modules\vue-cli\bin\vue-init:60 let template = program.args[0] ^^^ SyntaxError: ...
    收起

  • 浅谈vue项目优化之页面的按需加载(vue+webpack)

     2020-08-28 14:12:49
    本篇文章主要介绍了vue项目优化之页面的按需加载(vue+webpack)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    收起

  • vue入门到熟练（vue/vue-cli/vue-webpack）

     2019-12-30 15:34:31
    Vue事件 v-on vue计算属性&watch vue组件 vue路由 webpack打包 vue-cli-脚手架
    收起

  • Vue基础知识总结 9：vue webpack打包原理

     千次阅读 多人点赞 2021-10-02 12:32:02
    ???? Java学习路线：搬砖工逆袭Java架构师 ???? 简介：Java领域优质创作者?...、CSDN哪吒公众号作者✌ 、Java...并且不仅仅是JavaScript文件，还有CSS、图片、json文件等等，在webpack中都可以被当做模块来使用。 二、打

    🍅 作者简介：哪吒，CSDN2021博客之星亚军🏆、新星计划导师✌、博客专家💪

    🍅 哪吒多年工作总结：Java学习路线总结，搬砖工逆袭Java架构师

    🍅 关注公众号【哪吒编程】，回复1024，获取Java学习路线思维导图、大厂面试真题、加入万粉计划交流群、一起学习进步

    目录

    一、前端模块化

    二、打包

    三、安装webpack

    1、安装node.js

     2、安装webpack

    四、webpack打包js

    1、普通打包方式

    2、webpack.config.js配置和package.json配置

    3、理解开发时依赖和运行时依赖

    五、loader

    1、loader简介

    2、使用 loader

    3、配置[Configuration]允许你在 webpack 配置中指定多个 loader

    六、less与url-loader

    1、安装less

     2、less示例

    4、url-loader用法

    5、file-loader

    七、加载图片代码实例

    1、项目目录

     2、index.html

    3、main.js

    4、info.js

    5、mathUtils.js

    6、normal.css

    7、special.less

    八、ES6语法处理

    1、安装babel-loader

    2、在 webpack 配置对象中，需要添加 babel-loader 到 module 的 loaders 列表中，

    九、webpack使用vue的配置过程

    1、安装vue的三种方式

    2、npm安装vue

    十、el和template区别

    1、正常运行之后，我们要考虑一个问题

    2、解决方法 --> 定义template属性

    十一、认识plugin

    1、plugin是什么？

    2、loader和plugin的区别？

    3、plugin的使用过程

    4、代码实例

    5、htmlWebpackPlugin

    6、第三方插件uglifyjs-webpack-plugin

    7、webpack-dev-server搭建本地服务器

    一、前端模块化

    webpack是让我们可以进行模块化开发，并且会帮助我们处理模块间的依赖关系。

    并且不仅仅是JavaScript文件，还有CSS、图片、json文件等等，在webpack中都可以被当做模块来使用。

    二、打包

    webpack中的各种资源模块进行打包合并成一个或多个包（Bundle）。

    在打包的过程中，还可以对资源进行处理，比如压缩图片，将scss转成css，将ES6语法转成ES5语法，将TypeScript转成JavaScript等等操作。

    和gulp的有什么区别？

    1. gulp叫做前端自动化任务管理工具；
    2. gulp会定义一系列的task，处理各种事务（ES6、ts转化、图片压缩、scss转成css）
    3. 通过gulp依次执行这些task，并且让整个流程自动化；
    const gulp = require('gulp')
const babel = require('gulp-babel')

gulp.task('js',() => 
    gulp.src('src/*.js')
        .pipe(babel({
            prests:['es2015']
        }))
        .pipe(gulp.dest('dist'))
);

    什么时候使用gulp呢？

    1. 如果工程模块依赖比较简单，甚至没有用到模块化的概念；
    2. 只需要进行简单的合并、压缩；

    总而言之，webpack是功能更加强大的gulp。

    三、安装webpack

    1、安装node.js

    打开官网下载链接:Download | Node.js 我这里下载的是node-v6.9.2-x64.msi,如下图：

     2、安装webpack

    npm install webpack@3.6.0 -g

    四、webpack打包js

    1、普通打包方式

    webpack .\src\main.js .\dist\bundle.js

    打包之后，就可以在index.html中引入bundle.js了。

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<script src="./dist/bundle.js"></script>
</body>
</html>

    2、webpack.config.js配置和package.json配置

    （1）webpack.config.js

    const path = require('path')

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
}

    （2）package.json

    {
  "name": "meetwebpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^3.6.0"
  }
}

    3、理解开发时依赖和运行时依赖

    本地安装webpack

    npm install webpack@3.6.0 --save-dev

     在终端中敲的命令，运用的都是全局的webpack。

    五、loader

    1、loader简介

    loader 用于对模块的源代码进行转换。loader 可以使你在 import 或"加载"模块时预处理文件。因此，loader 类似于其他构建工具中“任务(task)”，并提供了处理前端构建步骤的强大方法。loader 可以将文件从不同的语言（如 TypeScript）转换为 JavaScript，或将内联图像转换为 data URL。loader 甚至允许你直接在 JavaScript 模块中 import CSS文件！

    你可以使用 loader 告诉 webpack 加载 CSS 文件，或者将 TypeScript 转为 JavaScript。为此，首先安装相对应的 loader：

    npm install --save-dev css-loader
npm install --save-dev ts-loader

    然后指示 webpack 对每个 .css 使用 css-loader，以及对所有 .ts 文件使用 ts-loader：

    webpack.config.js

    module.exports = {
  module: {
    rules: [
      { test: /\.css$/, use: 'css-loader' },
      { test: /\.ts$/, use: 'ts-loader' }
    ]
  }
};

    2、使用 loader

    在你的应用程序中，有三种使用 loader 的方式：

    • 配置（推荐）：在 webpack.config.js 文件中指定 loader。
    • 内联：在每个 import 语句中显式指定 loader。
    • CLI：在 shell 命令中指定它们。

    3、配置[Configuration]允许你在 webpack 配置中指定多个 loader

    这是展示 loader 的一种简明方式，并且有助于使代码变得简洁。同时让你对各个 loader 有个全局概览：

    六、less与url-loader

    1、安装less

    npm install --save-dev less-loader less

     2、less示例

    将 css-loader、style-loader 和 less-loader 链式调用，可以把所有样式立即应用于 DOM。

    module.exports = {
    ...
    module: {
        rules: [{
            test: /\.less$/,
            use: [{
                loader: "style-loader" // creates style nodes from JS strings
            }, {
                loader: "css-loader" // translates CSS into CommonJS
            }, {
                loader: "less-loader" // compiles Less to CSS
            }]
        }]
    }
};

     3、安装url-loader

    npm install --save-dev url-loader

    4、url-loader用法

    url-loader 功能类似于 file-loader，但是在文件大小（单位 byte）低于指定的限制时，可以返回一个 DataURL。

    import img from './image.png'

     webpack.config.js

    module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192
            }
          }
        ]
      }
    ]
  }
}

    当图片大小大于limit中限制时，需要使用file-loader进行图片加载，再转为base64字符串。 

    5、file-loader

    1、安装file-loader

    npm install --save-dev file-loader

    七、加载图片代码实例

    1、项目目录

     2、index.html

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<script src="./dist/bundle.js"></script>
</body>
</html>

    3、main.js

    // 1.使用commonjs的模块化规范
const {add, mul} = require('./js/mathUtils.js')

console.log(add(20, 30));
console.log(mul(20, 30));

// 2.使用ES6的模块化的规范
import {name, age, height} from "./js/info";

console.log(name);
console.log(age);
console.log(height);

// 3.依赖css文件
require('./css/normal.css')

// 4.依赖less文件
require('./css/special.less')
document.writeln('<h2>你好啊,哪吒!</h2>')

    4、info.js

    export const name = 'why';
export const age = 18;
export const height = 1.88;

    5、mathUtils.js

    export const name = 'why';
export const age = 18;
export const height = 1.88;

    6、normal.css

    body {
  /*background-color: red;*/
  background: url("../img/timg.jpg");
}

    7、special.less

    @fontSize: 50px;
@fontColor: orange;

body {
  font-size: @fontSize;
  color: @fontColor;
}

    八、ES6语法处理

    webpack打包的js文件，并没有将ES6语法转译成ES5的语法，因此可能对某些浏览器不兼容，此时需要使用babel。

    1、安装babel-loader

    npm install --save-dev babel-loader@7 babel-core babel-preset-es2015

    2、在 webpack 配置对象中，需要添加 babel-loader 到 module 的 loaders 列表中，

    像下面这样：

    module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['es2015']
        }
      }
    }
  ]
}

    bundle.js从ES6语法编译为ES5语法了。

    九、webpack使用vue的配置过程

    1、安装vue的三种方式

    1. 直接下载应用
    2. CDN引入
    3. npm安装

    2、npm安装vue

    因为不是运行时依赖，以后部署的时候也要使用vue，所以不需要-vue

    npm install vue --save

    runtime-only -> 代码中，不可以有任何的template

    runtime-compiler -> 代码中可以有template，因为有compiler可以用于编译template

    使用如下配置解决找不到template的报错问题：

    resolve: {
    // alias: 别名
    extensions: ['.js', '.css', '.vue'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  }

    十、el和template区别

    1、正常运行之后，我们要考虑一个问题

    如果我们将data中的数据显示在界面中，就必须修改index.html；

    如果我们后面自定义了组件，也必须修改index.html来使用组件；

    但是html模板在之后的开发中，并不希望手动的频繁的修改index.html；

    2、解决方法 --> 定义template属性

    在前面的Vue实例中，我们定义了el属性，用于和index.html中的#app进行绑定，让Vue实例之后可以管理它其中的内容；

    这里我们可以将div元素中的{{message}}内容删掉，只保留一个基本的id为div的元素；

    但是如果我们依然希望在其中显示{{message}}的内容，我们可以定义一个template属性；

    如果el和template同时存在时，template会替换掉el的内容：

    new Vue({
    el:'#app',
    template:`
        <div>
            <h2>{{message}}</h2>
            <button @click="btnClick">按钮</button>
            <h2>{{name}}</h2>
        </div>
    `,
    data:{
        message:'hello webpack',
        name:'哪吒'
    },
    methods:{
        btnClick(){
            console.log('i am csdn 哪吒！')
        }
    }
})

    简化：

    const App = {
     template:`
        <div>
            <h2>{{message}}</h2>
            <button @click="btnClick">按钮</button>
            <h2>{{name}}</h2>
        </div>
    `,
    data:{   
        return {
            message:'hello webpack',
            name:'哪吒'
        }
    },
    methods:{
        btnClick(){
            console.log('i am csdn 哪吒！')
        }
    }
}

new Vue({
    el:'#app',
    template:`<App/>`,
    components:{
        App
    }
})

    再次简化：

    app.js

    export default {
  template:  `
  <div>
    <h2>{{message}}</h2>
    <button @click="btnClick">按钮</button>
    <h2>{{name}}</h2>
  </div>
  `,
  data() {
    return {
      message: 'Hello Webpack',
      name: 'coderwhy'
    }
  },
  methods: {
    btnClick() {

    }
  }
}

    main.js

    // 5.使用Vue进行开发
import Vue from 'vue'
import App from './vue/app'

new Vue({
  el: '#app',
  template: '<App/>',
  components: {
    App
  }
})

    终极优化

    App.vue

    <template>
  <div>
    <h2 class="title">{{message}}</h2>
    <button @click="btnClick">按钮</button>
    <h2>{{name}}</h2>
    <Cpn/>
  </div>
</template>

<script>
  import Cpn from './Cpn'

  export default {
    name: "App",
    components: {
      Cpn
    },
    data() {
      return {
        message: 'Hello Webpack',
        name: 'coderwhy'
      }
    },
    methods: {
      btnClick() {

      }
    }
  }
</script>

<style scoped>
  .title {
    color: green;
  }
</style>

    main.js

    // 5.使用Vue进行开发
import Vue from 'vue'
import App from './vue/App.vue'

new Vue({
  el: '#app',
  template: '<App/>',
  components: {
    App
  }
})

    但是，此时程序无法加载vue文件，需要npm安装loader

    npm install vue-loader vue-template-compiler --save-dev

    webpack.config.js中配置：

    ...
{
    test: /\.vue$/,
    use: ['vue-loader']
}
...

    十一、认识plugin

    1、plugin是什么？

    plugin是插件的意思，通常适用于对某个现有的框架的扩展。

    webpack中的插件，就是对webpack现有功能的各种扩展，比如打包优化，文件压缩等。

    2、loader和plugin的区别？

    loader主要用于转换某些类型的模板，它是一个转换器。

    plugin是插件，它是对webpack本身的扩展，是一个扩展器。

    3、plugin的使用过程

    1. 通过npm安装需要使用的plugins
    2. 在webpack.config.js中的plugins中配置插件

    4、代码实例

    plugins: [
    new webpack.BannerPlugin('最终版权归aaa所有'),
],

    5、htmlWebpackPlugin

    （1）、作用

    1. 自动生成一个index.html文件
    2. 将打包的js文件，自动通过script标签插入到body中

    （2）安装htmlWebpackPlugin

    npm install htnl-webpack-plugin --save-dev

    （3）使用插件

    修改webpack.config.js文件中plugins部分的内容

    plugins: [
    new webpack.BannerPlugin('最终版权归aaa所有'),
    new HtmlWebpackPlugin({
      template: 'index.html'
    })
],

    6、第三方插件uglifyjs-webpack-plugin

    指定版本1.1.1，和CLI2保持一致。

    （1）安装

    npm install uglifyjs-webpack-plugin@1.1.1 --save-dev

    （2）修改配置文件

    plugins: [
    new webpack.BannerPlugin('最终版权归aaa所有'),
    new HtmlWebpackPlugin({
      template: 'index.html'
    }),
    new UglifyjsWebpackPlugin()
],

    7、webpack-dev-server搭建本地服务器

    （1）webpack-dev-server简介

    webpack提供了一个可选的本地开发服务器，这个本地服务器基于node.js搭建，内部使用express框架，可以实现我们想要的让浏览器自动刷新显示我们修改后的结果。

    （2）安装

    npm install --save-dev webpack-dev-server@2.9.1

    （3）属性介绍

    devserver作为webpack的一个选项，选项本身可以设置如下属性：

    1. contentBase：为哪一个文件夹提供本地服务，默认是根文件夹，我们这里要填写./dist
    2. port：端口号
    3. inline：页面实时刷新
    4. historyApiFallback：在SPA页面中，依赖HTML5的history模式

    （4）配置实例

      devServer: {
    contentBase: './dist',
    inline: true
  }

    8、webpack配置文件的分离

    （1）安装插件

    npm install webpack-merge --save-dev

    （2）分离代码实例

    webpack-config.js

    const path = require('path')

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: 'dist/'
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        // css-loader只负责将css文件进行加载
        // style-loader负责将样式添加到DOM中
        // 使用多个loader时, 是从右向左
        use: [ 'style-loader', 'css-loader' ]
      },
      {
        test: /\.less$/,
        use: [{
          loader: "style-loader", // creates style nodes from JS strings
        }, {
          loader: "css-loader" // translates CSS into CommonJS
        }, {
          loader: "less-loader", // compiles Less to CSS
        }]
      },
      {
        test: /\.(png|jpg|gif|jpeg)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              // 当加载的图片, 小于limit时, 会将图片编译成base64字符串形式.
              // 当加载的图片, 大于limit时, 需要使用file-loader模块进行加载.
              limit: 13000,
              name: 'img/[name].[hash:8].[ext]'
            },
          }
        ]
      },
      {
        test: /\.js$/,
        // exclude: 排除
        // include: 包含
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['es2015']
          }
        }
      },
      {
        test: /\.vue$/,
        use: ['vue-loader']
      }
    ]
  },
  resolve: {
    // alias: 别名
    extensions: ['.js', '.css', '.vue'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  }
}

    build/base.config.js

    const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const UglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin')

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, '../dist'),
    filename: 'bundle.js',
    // publicPath: 'dist/'
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        // css-loader只负责将css文件进行加载
        // style-loader负责将样式添加到DOM中
        // 使用多个loader时, 是从右向左
        use: [ 'style-loader', 'css-loader' ]
      },
      {
        test: /\.less$/,
        use: [{
          loader: "style-loader", // creates style nodes from JS strings
        }, {
          loader: "css-loader" // translates CSS into CommonJS
        }, {
          loader: "less-loader", // compiles Less to CSS
        }]
      },
      {
        test: /\.(png|jpg|gif|jpeg)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              // 当加载的图片, 小于limit时, 会将图片编译成base64字符串形式.
              // 当加载的图片, 大于limit时, 需要使用file-loader模块进行加载.
              limit: 13000,
              name: 'img/[name].[hash:8].[ext]'
            },
          }
        ]
      },
      {
        test: /\.js$/,
        // exclude: 排除
        // include: 包含
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['es2015']
          }
        }
      },
      {
        test: /\.vue$/,
        use: ['vue-loader']
      }
    ]
  },
  resolve: {
    // alias: 别名
    extensions: ['.js', '.css', '.vue'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  },
  plugins: [
    new webpack.BannerPlugin('最终版权归aaa所有'),
    new HtmlWebpackPlugin({
      template: 'index.html'
    })
  ]
}

    build/dev.config.js

    const webpackMerge = require('webpack-merge')
const baseConfig = require('./base.config')

module.exports = webpackMerge(baseConfig, {
  devServer: {
    contentBase: './dist',
    inline: true
  }
})

    build/prod.config.js  

    const UglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin')
const webpackMerge = require('webpack-merge')
const baseConfig = require('./base.config')

module.exports = webpackMerge(baseConfig, {
  plugins: [
    new UglifyjsWebpackPlugin()
  ]
})

    更改package.json

    "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config ./build/prod.config.js",
    "dev": "webpack-dev-server --open --config ./build/dev.config.js"
  }

    上一篇：Vue基础知识总结 8：Node.js简介

    下一篇：Vue基础知识总结 10：使用vue-cli（vue脚手架）快速搭建项目

    关注公众号，备注1024，获取Java学习路线思维导图、加入万粉计划交流群 

    收起
    展开全文
    java

  • 详解基于vue-cli优化的webpack配置

     2021-01-21 11:56:12
    关于原始webpack配置大家可以看下这篇文章vue-cli#2.0 webpack配置分析,文章基本对于文件每行代码都做了详细的解释，有助于更好的理解webpack。 仔细总结了一下，自己的优化基本还是网上流传的那几点 通过 ...
    收起

  • vue cli webpack中使用sass的方法

     2020-08-27 23:31:19
    主要介绍了vue cli webpack中使用sass的方法,需要的朋友可以参考下
    收起

  • extension-vue-webpack:带有vue，webpack和tailwindcss的Chrome扩展程序Bolierplate

     2021-03-17 20:14:39
    extension-vue-webpack:带有vue，webpack和tailwindcss的Chrome扩展程序Bolierplate
    收起
    JavaScript

  • vue和webpack安装命令详解

     2020-12-11 19:04:26
    一、安装vue相关命令 1、安装vue cnpm install vue  2、安装vue-cli cnpm install -g vue-cli...以上所述是小编给大家介绍的vue和webpack安装命令详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时
    收起

  • vue+webpack 打包文件 404 页面空白的解决方法

     2020-11-30 11:15:33
    最近用vue-cli+vue-router+webpack建立项目，其中的遇到的三个问题，整理如下： vue-cli+ webpack 建立的项目，cnpm run build 打包项目之后，需要放在http服务器上才可以运行， 例如 ：nginx vue单页面的启动页面是...
    收起

  • 将vuecli2项目升级webpack4项目模板

     2019-08-09 18:36:12
    由于 vue-cli 2 构建的项目是基于 webpack3，所以只能自己动手改动，至于升级 webpack4之后提升的编译速度以及各种插件自己去体验。
    收起

  • Vue 3.0和webpack5如期而至

     千次阅读 2020-09-19 20:13:10
    戳蓝字"前端优选"关注我们哦！一觉醒来，朋友圈被vue3.0和webpack5刷屏了以下是Vue3.0版本的一些介绍资料，目前中文版文档还没有公布链接https://gi...

    戳蓝字"

    前端优选

    "

    关注我们哦

    ！

    • 一觉醒来，朋友圈被vue3.0和webpack5刷屏了

    • 以下是Vue3.0版本的一些介绍资料，目前中文版文档还没有公布链接

    https://github.com/vuejs/vue-next/releases/tag/v3.0.0

    Vue3.0几个优化点

    • 进一步推进“渐进框架”概念

    • 分层内部模块

    • 解决规模问题的新API

    • 性能改进提升

    • 改进的TypeScript集成

    • 部分实验特征

    • 分阶段发布流程

    • 后续：

      • 迁移和IE11支持

    • 官网英文版地址：https://v3.vuejs.org/

    • 官方示例：

    const app = Vue.createApp({
  data() {
    return {
      input: '# hello'
    }
  },
  computed: {
    compiledMarkdown() {
      return marked(this.input, { sanitize: true });
    }
  },
  methods: {
    update: _.debounce(function(e) {
      this.input = e.target.value;
    }, 300)
  }
})

app.mount('#editor')

    初始化vue3.0项目分几种模式

    • CDN引入：

    <script src="https://unpkg.com/vue@next"></script>

    • vite构建：

    npm init vite-app hello-vue3 # OR yarn create vite-app hello-vue3

    • vue-cli构建:

    npm install -g @vue/cli # OR yarn global add @vue/cli
vue create hello-vue3
# select vue 3 preset

    迁移指南：

    文档地址：https://v3.vuejs.org/guide/migration/introduction.html#ide-support

    注意点

    • 目前，针对Vue 3和v3的项目的文档网站，GitHub分支和npm dist标签将保持next标明状态。这意味着npm install vue仍将安装Vue 2.x和npm install vue@nextVue3。我们计划在2020年底之前将所有文档链接，分支和dist标签切换为默认值3.0。

    • 同时，我们已经开始计划2.7，这将是2.x发行版的最后一个计划的次要发行版。2.7将向后移植来自v3的兼容改进，并发出有关v3中已删除/更改的API使用情况的警告，以帮助潜在的迁移。我们计划在2021年第一季度研究2.7，它将在发布后直接变为LTS，具有18个月的维护寿命。

    webpack5传闻2020年10月10日正式版本5.0版本

    • 我之前使用感受：

      • html-webpack-plugin做了调整

      • 之前跟react-hot-loader热更新插件有一些冲突

      • 迁移升级起来比较快

      • 目前我没有看到正式的官方文章、文档链接，如果你们有的话下方讨论的时候留言以下让大家看到

    目前如何使用webpack5

    • 安装

    npm install —save-dev webpack@next或
npm install —save-dev webpack@v5.0.0-alpha.9

    据我所知webpack5做的优化

    • 使用持久化缓存提高构建性能；

    • 使用更好的算法和默认值改进长期缓存（long-term caching）；

    • 清理内部结构而不引入任何破坏性的变化；

    • 引入一些breaking changes，以便尽可能长的使用v5版本。

    前端人不必焦虑

    • 原生javascript和Node.js是你的基础，linux和数据结构算法、TCP、操作系统这些则你的内功，掌握好这些无论框架它们怎么升级也终究是时代的产物。框架和库升级如果是断崖式升级那么这个库在国内也肯定以后会挂掉的，不存在学不动

    • 新框架升级的话建议等过段时间，等它稳定&你与公司成员都熟悉文档后升级比较好，特别是大型项目的升级

    • 关键点在于，这个项目你觉得是否有升级必要

    ❤️ 感谢大家

    如果你觉得这篇内容对你挺有有帮助的话：

    1. 点赞支持下吧，让更多的人也能看到这篇内容（收藏不点赞，都是耍流氓 -_-）

    2. 关注公众号【前端优选】，定期为你推送好文。

    添加个人微信，进群与小伙伴一起玩耍（已经推出）~

    收起
    展开全文
    微软 xhtml gwt mvvm

  • webpack_number8fv_vue企业网站_vue企业建站_vuewebpack_vue企业站_

     2021-10-01 06:17:52
    vue企业网站代码，主要应用于企业建站，分类新闻发布，公司详细信息
    收起

  • vue init webpack myproject构建项目 ip不能访问的解决方法

     2020-08-27 20:05:53
    下面小编就为大家分享一篇vue init webpack myproject构建项目 ip不能访问的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    收起

  • vue+webpack支持多页面打包

     2018-01-06 14:59:50
    vue+webpack结构，支持多页面打包。重点看配置，还可支持css引用图片。
    收起

  • vue和webpack整合的完整demo

     2022-02-08 16:49:53
    vue和webpack整合的完整demo
    收起

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 139,983
精华内容 55,993
热门标签
关键字：

vue webpack5