现如今,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 配置文件的更多相关文章

  1. webpack基础+webpack配置文件常用配置项介绍+webpack-dev-server

    一.webpack基础 1.在项目中生成package.json:在项目根目录中输入npm init,根据提示输入相应信息.(也可以不生成package.json文件,但是package.json是很 ...

  2. 调试webpack配置文件

    webpack运行在nodejs上,调试webpack就相当于调试nodejs程序.下面介绍一种通用的办法. 1.配置package.json,加一个debug. { 'scripts': { 'de ...

  3. webpack 配置文件相关解说

    博客地址:https://ainyi.com/10 webpack - 什么是webpack: WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它 ...

  4. react暴露webpack配置文件

    在react中安装create-react-app脚手架新建项目,但是新建的项目中没有配置文件. webpack的配置文件webpack.base.conf.js隐藏在了node_modules文件夹 ...

  5. 为什么我们要做三份 Webpack 配置文件

    时至今日,Webpack 已经成为前端工程必备的基础工具之一,不仅被广泛用于前端工程发布前的打包,还在开发中担当本地前端资源服务器(assets server).模块热更新(hot module re ...

  6. webpack实践(二)- webpack配置文件

    webpack系列博客中代码均在github上:https://github.com/JEmbrace/webpack-practice <webpack实践(一)- 先入个门> < ...

  7. 3.WebPack配置文件

    一.为什么需要WebPack配置文件 引用自官方: 在 webpack 4 中,可以无须任何配置使用,然而大多数项目会需要很复杂的设置,这就是为什么 webpack 仍然要支持 配置文件.这比在终端( ...

  8. 二:搭建一个webpack3.5.5项目:建立项目的webpack配置文件

    第一步: npm init -y [初始文件] npm info webpack / bower info webpack[查看版本,用bower的时候要先 npm install bower] np ...

  9. 3.使用webpack配置文件webpack.confg.js配置打包文件的入口和出口

    在项目根目录下新建webpack.config.js文件 webpack.config.js文件配置如下: // Node的路径操作使用的是path模块 const path=require('pat ...

  10. webpack 配置文件外置

    转自:https://www.jianshu.com/p/377bfd2d9034 1.问题初衷 解决问题的初衷,源于vue项目中公共路径在打包之后一旦遇到整体的路径更改就需要再次build一下. 如 ...

随机推荐

  1. THINKPHP源码学习--------验证码类

    TP3.2验证码类的理解 今天在学习中用到了THINKPHP验证码,为了了解究竟,就开始阅读TP验证码的源码. 源码位置:./ThinkPHP/Library/Think/Verify.class.p ...

  2. D3D三层Texture纹理经像素着色器实现渲染YUV420P

    简单记录一下这两天用Texture实现渲染YUV420P的一些要点. 在视频播放的过程中,有的时候解码出来的数据是YUV420P的.表面(surface)通过设置参数是可以渲染YUV420P的,但Te ...

  3. .NET MVC实现多图片上传并附带参数(ajaxfileupload)

    做网站呢,都免不了要做图片上传. 还记得去年做微信的时候用WebAPI+ajaxfileupload.js做了一个能够附带参数上传的功能,博文地址:.NET WebAPI 实现图片上传(包括附带参数上 ...

  4. 学券制(教育券、school voucher)

    美国「学券制」是怎样的一种制度?它为什么是共和党的执政政策?它在美国及其它地区有实施吗?效果如何?能否在保证公平的同时,通过市场提高教育质量? 作者:冉筱韬链接:https://www.zhihu.c ...

  5. 【C#】类单例 可以解决全局变量的问题

    单件模式(Singleton):保证一个类仅有一个实例,并提供一个访问它的全局访问点. 知道 详解

  6. iOS 读取大文件时候的注意点

    转: 使用NSData读取数据,采用NSData的dataWithContentsOfFile:方法.不少人反馈说如果直接使用,将会耗尽iOS的内存. 其实这个是可以改善的. NSData还有一个AP ...

  7. BZOJ 3275: Number

    3275: Number Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 874  Solved: 371[Submit][Status][Discus ...

  8. sql 单个字段去重查询 distinc 和 group by的效率问题

    sql 查询 distinc用法 distinct 和group by都需要排序,一样的结果集从执行计划的成本代价来看差距不大,但group by 还涉及到统计,所以应该需要准备工作.所以单纯从等价结 ...

  9. POJ 2387 Til the Cows Come Home(最短路 Dijkstra/spfa)

    传送门 Til the Cows Come Home Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 46727   Acce ...

  10. theano scan optimization

    selected from Theano Doc Optimizing Scan performance Minimizing Scan Usage performan as much of the ...