常用的webpack 配置

const path = require('path');

let HtmlWebpackPlugin = require('html-webpack-plugin');

let VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {

entry: './src/main.js',

output: {

path: path.resolve(__dirname),

filename:'bundle.js',

resolve: {

// 设置别名

alias: {

'@': resolve('src'),// 这样配置后 @ 可以指向 src 目录

'@components': path.resolve(__dirname, 'src/components')

}

module:{

rules:[

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

{

test:/\.js/,

use:{

loader:'babel-loader',

options:{

presets:['@babel/preset-env']

exclude:/node_modules/,

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

]

plugins:[

new VueLoaderPlugin(),

new HtmlWebpackPlugin({

template:'./src/index.html'

})

]

};

 webpack webpack-cli webpack-dev-server  webpack 需要的 vue-style-loader css-loader  处理css样式html-webpack-plugin 处理html@babel/core @babel/preset-env babel-loader   处理es6 语法vue-template-compiler  vue-loader 处理vue  编译的webpack-merge  合并webpack  配置

转载于:https://www.cnblogs.com/guangzhou11/p/11597011.html

常用的webpack 配置相关推荐

vue webpack 访问php,实例详解vue-cli优化的webpack配置
最近的项目度过了开始忙碌的基建期,也慢慢轻松下来,准备记录一下自己最近webpack优化的措施,希望有温故知新的效果.本文主要介绍了详解基于vue-cli优化的webpack配置,小编觉得挺不错的,现 ...
结合webpack配置_前端 Webpack 工程化的最佳实践
作者 | 阿里文娱前端开发专家芃苏责编 | 屠敏头图 | CSDN 下载自视觉中国引言 ▐ 前端构建工具的演变回想在2015-2016年的时候,开发者们开始渐渐把视线从大量使用Task Runn ...
基于Vue-cli和Vux的webpack配置
基于vue-cli配置然后使用vux的webpack配置 npm i vue-cli -g // 如果还没安装 vue init airyland/vux2 projectPathcd projec ...
webpack 配置 react-pro
1.首先执行 npm init ,生成package.json文件, package.json文件中包含项目名称,描述,作者等等信息: 在package.json中配置信息,除了这些之外,还要配 ...
基于vue-cli的webpack配置优化
基于vue-cli优化的webpack配置大概分为以下几点通过 externals 配置来提取常用库,引用外链配置CommonsChunkPlugin提取公用代码 (vue-cli已做) 善用a ...
Koa2仿知乎服务端项目：Webpack配置
项目简介该项目为一个后端项目,该项目仿"知乎",模拟实现了: JWT用户认证.授权模块上传图片模块个人资料模块关注与粉丝模块话题模块问题模块答案模块评论模块共计4 ...
vue 配置【详解】 vue.config.js （含 webpack 配置）
目录常用配置完整配置使用 vue-cli 3.x 以上的脚手架创建的 vue 项目不再有 build文件夹,若需要进行相关配置,需在项目目录下新建文件 vue.config.js 常用配置 // ...
干货！快速上手typescript的学习笔记（对比JS的新特性，环境搭建，webpack配置，ts编译配置）
前提需要有js的基础文章目录 TypeScript 产生背景什么是TypeScript? TypeScript增加了什么 TypeScript开发环境搭建基本类型编译文件配置 tsconfig ...
webpack配置详解
1.使用模式: (1).CLI模式:也就是命令行用户界面.例如: webpack example1.1.js bundle1.1.js 如果我们直接执行webpack,不加任何参数(且当前目录不存在配 ...

常用的webpack 配置

常用的webpack 配置相关推荐

最新文章

热门文章