webpack 常用配置
webpack.config.js
const path = require('path');
const webpack = require('webpack');
const htmlWebpackPlugin = require('html-webpack-plugin');
const vueLoaderPlugin = require('vue-loader/lib/plugin'); //引入这行 module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, './dist'),
filename: 'boundle.js'
},
mode: 'development',
devServer: {
open: true,//自动打开浏览器
port: 3000,//运行端口号
contentBase: 'src',//指定跟目录
hot: true,//启用热更新
openPage: 'index.html'//设置默认启动页面
},
plugins: [
//配置插件的节点
new webpack.HotModuleReplacementPlugin(),//热更新
new vueLoaderPlugin(),
new htmlWebpackPlugin({
//创建一个内存中生成HTML页面的插件
//并且把打包的boundle.js自动注入到html页面中
template: path.join(__dirname, './src/index.html'),
filename: 'index.html'
})
],
module: {
rules: [
//第三方模块匹配规则
{
test: /\.css$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
sourceMap: true
}
},
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
sourceMap: true,
plugins: (loader) => {
require('autoprefixer')({ overrideBrowserslist: ['> 0.15% in CN'] })
}
}
}
]
},
{
//处理图片路径的loader
test: /\.(jpg|png|gif|bmp|jpeg)$/,
use: {
loader: 'url-loader',
options: {
limit: 8501,
//哈希-图片原名称。图片原后缀
name: '[hash:8]-[name].[ext]'
}
}
},
{
test: /\.(ttf|eot|svg|woff|woff2)$/,
use:['url-loader']
// use: {
// loader: 'url-loader',
// options: { // }
// }
},
// test:/\.(ttf|eot|woff|woff2|svg)$/,
// use:['file-loader']//1.把你的资源移动到输出目录2.返回最终引入资源的url
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,//排除这两个里面的JS不编译
use: {
loader: 'babel-loader',
}
},
{
test: /\.vue$/,
use: [
{
loader: 'vue-loader',
}
]
},
{
test: /\.scss$/,
use: ["style-loader", "css-loader", "sass-loader"]
}
]
}
};
package.json(VUE流派)
{
"name": "webpack-test",
"version": "1.0.0",
"description": "test",
"main": "main.js",
"dependencies": {
"jquery": "^3.4.1",
"node-sass": "^4.12.0",
"vue": "^2.6.10",
"webpack-dev-server": "^3.8.0"
},
"devDependencies": {
"autoprefixer": "^9.6.1",
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-env": "^1.7.0",
"babel-preset-stage-0": "^6.24.1",
"css-loader": "^3.2.0",
"file-loader": "^4.2.0",
"html-webpack-plugin": "^3.2.0",
"postcss-loader": "^3.0.0",
"sass-loader": "^8.0.0",
"style-loader": "^1.0.0",
"url-loader": "^2.1.0",
"vue-loader": "^15.7.1",
"vue-router": "^3.1.3",
"vue-template-compiler": "^2.6.10",
"vuex": "^3.1.1",
"webpack": "^4.39.3",
"webpack-cli": "^3.3.8"
},
"scripts": {
"dev2": "webpack-dev-server --open --port 3000 --contentBase src --hot",
"dev": "webpack-dev-server",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
webpack 常用配置的更多相关文章
- webpack常用配置总结
1. webpack简介 webpack 是一个模块打包工具.它使得模块相互依赖并且可构建等价于这些模块的静态资源.相比于已经存在的模块打包器(module bundler),webpack的开发动机 ...
- webpack常用配置
webpack --help或webpack -h 列出命令行所有可用的配置选项 webpack --config example.config.js 指定其他的配置文件.配置默认文件为webpack ...
- vue项目构建:vue-cli+webpack常用配置
1,Webpack-dev-server的proxy用法:https://www.jianshu.com/p/f489e7764cb8 2,vue-cli3搭建项目之webpack配置:https:/ ...
- vue第二单元(webpack的配置-学习webpack的常用配置)
第二单元(webpack的配置-学习webpack的常用配置) #课程目标 掌握webpack的常用配置 掌握如何根据实际的需求修改webpack的对应配置 了解webpack-dev-server的 ...
- 在Webpack 5 中如何进行 CSS 常用配置?
本文摘要:主要通过实操讲解运用Webpack 5 CSS常用配置的方法步骤 前文已谈到可以通过配置 css-loader 和 style-loader,使 webpack5 具有处理 CSS 资源的能 ...
- webpack实用配置
前面的话 上文介绍了webpack入门,本文将详细介绍webpack实用配置 版本号 以entry.js打包为bundle.js为例,出口的filename可以设置为[id].[name].[hash ...
- 在找一份相对完整的Webpack项目配置指南么?这里有
Webpack已经出来很久了,相关的文章也有很多,然而比较完整的例子却不是很多,让很多新手不知如何下脚,下脚了又遍地坑 说实话,官方文档是蛮乱的,而且有些还是错的错的..很多配置问题只有爬过坑才知道 ...
- webpack详细配置解析
阅读本文之前,先看下面这个webpack的配置文件,如果每一项你都懂,那本文能带给你的收获也许就比较有限,你可以快速浏览或直接跳过:如果你和十天前的我一样,对很多选项存在着疑惑,那花一段时间慢慢阅读本 ...
- Webpack 常用命令总结以及常用打包压缩方法
前言:Webpack是一款基于node的前端打包工具,它可以将很多静态文件打包起来,自动处理依赖关系后,生成一个.js文件,然后让html来引用,不仅可以做到按需加载,而且可以减少HTTP请求,节约带 ...
随机推荐
- shell命令传参数(参数长度不定)
脚本 sudo echo "[mysqlMaster<$1>]" >> /home/admin/hostrecord count= ];do >> ...
- 解决ajax跨域几种方式
发生跨域问题的原因: 浏览器的限制,出于安全考虑.前台可以正常访问后台,浏览器多管闲事报跨域问题,但其实前台已经访问到后台了. 跨域,协议.域名.端口任何一个不一样浏览器就认为是跨域. XHR(XML ...
- [Python3 练习] 005 汉诺塔1 递归解法
题目:汉诺塔 I (1) 描述 传说,在世界中心贝拿勒斯(在印度北部)的圣庙外有左中右三根足够长的柱子(塔) 左边柱子上套着 64 片金片,金片按"上小下大"排,其余两根是空柱子 ...
- python程序daemon化
1 直接空格加& python flask_server.py & 最简单的方式 这样还不行,不知道为什么flask server会自动退出. $ nohup python flask ...
- mybatis如何把session托管给spring
原生mybatis创建SqlSession的流程: SqlSession sqlSession = null; try { sqlSession = sqlSessionFactory.openSes ...
- Mybatis-学习笔记(2)Mybatis配置文件
3>typeAliases:类型别名.2种指定方式. 1>给某个类起个别名 <typeAliases> <typeAlias type="com.lfy.b ...
- Java开发第一次面试经验(视频面试)
坐标:山东潍坊公共实训基地 面试岗位:java开发实习生 我们班级一共6个人一起面试,1对1,其他人坐在旁边倾听,两个大牛,四个酱油,我应该是最黑的酱油啦. 面试问题: 1.请简短的做一下自我介绍: ...
- window.onload后跟函数 和跟函数名的区别【window.onload = asd() 和 window.onload = asd 】
window.onload:页面加载完毕执行[DOM tree + 外部图片 + 资源] <script> function asd(){ return 10; } window.onlo ...
- JS 总结之关于 this 应该知道的几个点
JS 中的 this 对每位前端工程师都不陌生,经常看到对象这里 this 那里 this,那什么是 this?答案就是上下文对象,即被调用函数所处的环境,也就是说,this 在函数内部指向了调用函数 ...
- .h与.cpp
本质上没什么区别. cpp:c plus plus,就表示为c++原文件. .h文件实现的功能是声明.cpp文件中需要使用的变量.函数及宏定义等. .h文件就像是一个接口,具体的实现可以在.cpp中, ...