webpack 配置文件
现如今,webpack非常的受欢迎,比较火的几款js框架都推荐使用webpack来构建项目,而webpack也确实非常强大,但是配置webpack缺常常带来很多问题,接下来就写一下我自己遇到的一些坑。
首先是安装webpack,现在安装模块一般是两种,一种是全局安装,一种是本地安装,全局安装只需要安装一次,但是,全局安装带来一个问题,就是部分模块使用会有问题,比如html-webpack-plugins,老是提示找不到模块,尝试了几种方法,但是都无效,可能我电脑问题。反正本地安装保险,其实每次做项目也不差这一个包。
npm install webpack --save-dev
//推荐使用淘宝镜像,毕竟国内的快很多
关于webpack.config.js的配置
//引入两个模块在后面用,path用来解析路径,webpack用来使用内置的一些模块
var path = require('path')
var webpack = require('webpack') module.exports = {
//入口文件,这个很重要
entry: './src/main.js',
//输出文件,当入口文件有多个,并且分别打包,filename使用[name].js,这样就可以根据入口文件名字给输出文件命名
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'build.js'
},
//这里主要是各种loader的配置,webpack只能解析js,所以对于其他中类的文件就需要各种loader来解析,但是也很方便。
//test中是正则表达式,用来匹配不同的文件,loader就是解析相关文件所需要的解析器,option是一些其他选项
module: {
rules: [{
test: /\.vue$/,
loader: 'vue-loader',
options: { }
}, {
//对于css最好style-loader和css-loader都写上,还要注意书写顺序,关系到解析顺序,尤其是使用sass和less,webpack是从右到左加载loader的。
test: /\.css$/,
loader: 'style-loader!css-loader',
}, {
test:/\.scss/,
loader:'style-loader!css-loader!sass-loader',
exclude:/node_modules/
}, {
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/ }, {
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options:{
//这里打包后可以把所有的字体库都放在fonts文件夹中
name:'fonts/[hash].[ext]'
}
}]
},
resolve: {
alias: {
//这里是关于vue,官方下载的模板是vue/dist/vue.common.js,但是使用vue-router用到了template,所以记得更改
'vue$': 'vue/dist/vue.js'
}
},
//这里是关于热加载的配置
devServer: {
historyApiFallback: true,
noInfo: true
},
//这里是表示打包时使用source-map,打包之后调试会直接跳到source-map中,再也不用看压缩代码。
devtool: '#eval-source-map'
}
然后是关于使用,一般在package.json的scripts中配置,直接npm run ...;
在这里依托于热加载,如果想运行直接打开,在webpack-dev-server后面加上“--open”即可,--inline表示使用inline模式,另外一种模式是frame,--hot表示热更新,--progress表示显示打包进度。
"dev": "webpack-dev-server --inline --hot",
"build": "webpack --progress --hide-modules"
大概就是这么多,简单使用还是没问题的。
最近用vue2.0和饿了么的elementUI写了个web端的项目,很小,但是基本都涉及到了,除了vuex。github地址:
https://github.com/Stevenzwzhai/vue2.0-elementUI-axios-vueRouter
之前写过mint-ui的也在git中,欢迎查看。
webpack 配置文件的更多相关文章
- webpack基础+webpack配置文件常用配置项介绍+webpack-dev-server
一.webpack基础 1.在项目中生成package.json:在项目根目录中输入npm init,根据提示输入相应信息.(也可以不生成package.json文件,但是package.json是很 ...
- 调试webpack配置文件
webpack运行在nodejs上,调试webpack就相当于调试nodejs程序.下面介绍一种通用的办法. 1.配置package.json,加一个debug. { 'scripts': { 'de ...
- webpack 配置文件相关解说
博客地址:https://ainyi.com/10 webpack - 什么是webpack: WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它 ...
- react暴露webpack配置文件
在react中安装create-react-app脚手架新建项目,但是新建的项目中没有配置文件. webpack的配置文件webpack.base.conf.js隐藏在了node_modules文件夹 ...
- 为什么我们要做三份 Webpack 配置文件
时至今日,Webpack 已经成为前端工程必备的基础工具之一,不仅被广泛用于前端工程发布前的打包,还在开发中担当本地前端资源服务器(assets server).模块热更新(hot module re ...
- webpack实践(二)- webpack配置文件
webpack系列博客中代码均在github上:https://github.com/JEmbrace/webpack-practice <webpack实践(一)- 先入个门> < ...
- 3.WebPack配置文件
一.为什么需要WebPack配置文件 引用自官方: 在 webpack 4 中,可以无须任何配置使用,然而大多数项目会需要很复杂的设置,这就是为什么 webpack 仍然要支持 配置文件.这比在终端( ...
- 二:搭建一个webpack3.5.5项目:建立项目的webpack配置文件
第一步: npm init -y [初始文件] npm info webpack / bower info webpack[查看版本,用bower的时候要先 npm install bower] np ...
- 3.使用webpack配置文件webpack.confg.js配置打包文件的入口和出口
在项目根目录下新建webpack.config.js文件 webpack.config.js文件配置如下: // Node的路径操作使用的是path模块 const path=require('pat ...
- webpack 配置文件外置
转自:https://www.jianshu.com/p/377bfd2d9034 1.问题初衷 解决问题的初衷,源于vue项目中公共路径在打包之后一旦遇到整体的路径更改就需要再次build一下. 如 ...
随机推荐
- python学习3
这部分学习python函数的写法: 在写python函数之前,首先看一下python中已经写好的函数,就像C中的<math>中的那些函数一样的东西有哪些:网址为https://docs.p ...
- 使用Jenkins配置自动化构建
持续集成是个简单重复劳动,人来操作费时费力,使用自动化构建工具完成是最好不过的了. 为了实现这个要求,我选择了Jenkins. 从http://mirrors.jenkins-ci.org/windo ...
- docker学习(4) 一些常用操作
继续docker的学习之旅,今天练习一些常用的命令: 一.镜像相关 1.1 列出本机所有镜像 docker images 后面的操作,都以ubuntu做为练习的目标. 另外:如果某些镜像文件不想要了, ...
- Caliburn.Micro学习笔记目录
Caliburn.Micro学习笔记(一)----引导类和命名匹配规则 Caliburn.Micro学习笔记(二)----Actions Caliburn.Micro学习笔记(三)----事件聚合IE ...
- java Ajax的应用
一.Ajax的使用步骤 步一:创建AJAX异步对象,例如:createAJAX() 步二:准备发送异步请求,例如:ajax.open(method,url) 步三:如果是POST请求的话,一定要设置A ...
- Ext动态加载Toolbar
在使用Ext的GridPanel时候,有时候需要面板不用重新加载而去更新Store或者Toolbar,Store的方法有很多,例如官方api给我们提供的Store.load(),Store.reLoa ...
- Tween公式 以及四个参数
Tween的主页在这里:http://createjs.com/tweenjs , 这里边还有挺多开源项目的: Tween公式 4个参数 t:current time(当前时间) b:beginnin ...
- beanstalkd 消息队列
概况:Beanstalkd,一个高性能.轻量级的分布式内存队列系统,最初设计的目的是想通过后台异步执行耗时的任务来降低高容量Web应用系统的页面访问延迟,支持过有9.5 million用户的Faceb ...
- JavaScript零基础学习系列五
定时器 1.定时器:设定时间,在指定的时间之后执行函数或者是程序 a.反复性定时器:var dingshiqi=Window.setInterval("函数名()",时间n[毫 ...
- LOL one Key
玩英雄联盟的小伙伴们快点来,犀利的工具哦,注意一点哦,放技能的时候别按空格,不然放不出来.最后说一句这几天常说的话 新年快乐.. 下载地址:http://pan.baidu.com/s/1eQzJ8l ...