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一下. 如 ...
随机推荐
- THINKPHP源码学习--------验证码类
TP3.2验证码类的理解 今天在学习中用到了THINKPHP验证码,为了了解究竟,就开始阅读TP验证码的源码. 源码位置:./ThinkPHP/Library/Think/Verify.class.p ...
- D3D三层Texture纹理经像素着色器实现渲染YUV420P
简单记录一下这两天用Texture实现渲染YUV420P的一些要点. 在视频播放的过程中,有的时候解码出来的数据是YUV420P的.表面(surface)通过设置参数是可以渲染YUV420P的,但Te ...
- .NET MVC实现多图片上传并附带参数(ajaxfileupload)
做网站呢,都免不了要做图片上传. 还记得去年做微信的时候用WebAPI+ajaxfileupload.js做了一个能够附带参数上传的功能,博文地址:.NET WebAPI 实现图片上传(包括附带参数上 ...
- 学券制(教育券、school voucher)
美国「学券制」是怎样的一种制度?它为什么是共和党的执政政策?它在美国及其它地区有实施吗?效果如何?能否在保证公平的同时,通过市场提高教育质量? 作者:冉筱韬链接:https://www.zhihu.c ...
- 【C#】类单例 可以解决全局变量的问题
单件模式(Singleton):保证一个类仅有一个实例,并提供一个访问它的全局访问点. 知道 详解
- iOS 读取大文件时候的注意点
转: 使用NSData读取数据,采用NSData的dataWithContentsOfFile:方法.不少人反馈说如果直接使用,将会耗尽iOS的内存. 其实这个是可以改善的. NSData还有一个AP ...
- BZOJ 3275: Number
3275: Number Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 874 Solved: 371[Submit][Status][Discus ...
- sql 单个字段去重查询 distinc 和 group by的效率问题
sql 查询 distinc用法 distinct 和group by都需要排序,一样的结果集从执行计划的成本代价来看差距不大,但group by 还涉及到统计,所以应该需要准备工作.所以单纯从等价结 ...
- POJ 2387 Til the Cows Come Home(最短路 Dijkstra/spfa)
传送门 Til the Cows Come Home Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 46727 Acce ...
- theano scan optimization
selected from Theano Doc Optimizing Scan performance Minimizing Scan Usage performan as much of the ...