现如今,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. JavaScript代码段整理笔记系列(二)

    上篇介绍了15个常用代码段,本篇将把剩余的15个补齐,希望对大家有所帮助!!! 16.检测Shift.Alt.Ctrl键: event.shiftKey; //检测Shift event.altKey ...

  2. Windows下虚拟机安装Ubuntu15.10 Destop简易操作过程

    一.前提环境: 1.vmware12.1,若您的系统是32位,请使用vmware10以下版本. 2.至少双核处理器,2G以上可用内存. 3.Ubuntu安装包(.iso后缀). 注:请尽量支持正版. ...

  3. JS 阶段练习~ 仿flash的图片轮换效果

    结合了所学的简单运动框架~  做这样一个综合小实例~~ -------------------------主要问题: 1.getByClassName  IE低版的兼容性 2.DOM不够严谨 … 各种 ...

  4. 监控系统Opserver的配置调试

    Stack Exchange开源其监控系统Opserver有一段时间了.之前在项目中用过他们的MiniProfile来分析页面执行效率和帮助新人了解项目,当他们开源了其监控系统的时候正好部门也在关注监 ...

  5. [LeetCode] Arranging Coins 排列硬币

    You have a total of n coins that you want to form in a staircase shape, where every k-th row must ha ...

  6. 【6年开源路】FineUI家族今日全部更新(FineUI + FineUI3to4 + FineUI.Design + AppBox)!

    刚才询问博客园团队: [6年开源路]三石今日送福利,AppBox4.0源码免费拿!FineUI家族今日全部更新(FineUI + FineUI3to4 + FineUI.Design + AppBox ...

  7. POJ 1979 Red and Black

    #include<iostream> #include<cstdio> #include<queue> #include<algorithm> #inc ...

  8. 修改hosts文件在本地使域名解析到指定IP

    # Additionally, comments (such as these) may be inserted on individual  # lines or following the mac ...

  9. poj3581

    Sequence Time Limit: 5000MS   Memory Limit: 65536K Total Submissions: 6893   Accepted: 1534 Case Tim ...

  10. 兄弟连javascript学习笔记

    /* Javascript:用来在页面中编写特效,和HTML.CSS一样都是有浏览器解析 Javascript语言: 一.JS如何运行(javascript,jscript,vbscript,appl ...