webpack 配置流程记录

vue项目实战记录,地址在这 购物车单界面

npm install
npm run dev 

跑起来可以看到界面效果

这里简单记录一下webpack的编译流程

入口 package.json

"scripts": {
    "dev": "node build/dev-server.js", //npm run dev ,执行这里
    "build": "node build/build.js"
  },

build文件下的dev-server.js文件

var config = require(‘../config‘)//引入的一个配置文件,运行时和开发时的一个配置文件

var webpack = require(‘webpack‘)
var opn = require(‘opn‘)
var proxyMiddleware = require(‘http-proxy-middleware‘)//http协议代理的一个中间链
var webpackConfig = require(‘./webpack.dev.conf‘)// 目前是开发环境,所以是dev.conf

webpack.dev.conf 的导入文件

var config = require(‘../config‘)
var webpack = require(‘webpack‘)
var merge = require(‘webpack-merge‘)
var utils = require(‘./utils‘)
var baseWebpackConfig = require(‘./webpack.base.conf‘) //导入基础配置文件
var HtmlWebpackPlugin = require(‘html-webpack-plugin‘)//webpack提供的一个操作html的插件
//具体看demo注释

webpack.base.conf 文件

var path = require(‘path‘)
var config = require(‘../config‘)
var utils = require(‘./utils‘)
var projectRoot = path.resolve(__dirname, ‘../‘)//定义了当前项目的根目录

entry: {
    app: ‘./src/main.js‘  //这个就是定义的入口文件了
  },
 output: {
    path: config.build.assetsRoot, //输出的文件路径,对应config文件加下的index.js文件的assetsRoot路径

    publicPath: process.env.NODE_ENV === ‘production‘ ? config.build.assetsPublicPath : config.dev.assetsPublicPath,
    filename: ‘[name].js‘ //对应的  entry的一个key ,这里就是app, app.js就是这么得来的

 resolve: {
//模块的相关配置
    extensions: [‘‘, ‘.js‘, ‘.vue‘, ‘.json‘],//可以自动补全的后缀
    fallback: [path.join(__dirname, ‘../node_modules‘)],//当前端模块找不到的时候就从node_modules里面找
    alias: {
//提供的别名
      ‘vue$‘: ‘vue/dist/vue.common.js‘,
      ‘src‘: path.resolve(__dirname, ‘../src‘),
      ‘assets‘: path.resolve(__dirname, ‘../src/assets‘),
      ‘components‘: path.resolve(__dirname, ‘../src/components‘)
    }

  module: {
//
    loaders: [
      {
//编译时候的处理,比如这里,对所有的js后缀文件babel loader做处理
       test: /\.js$/,
        loader: ‘babel‘,
        include: projectRoot, //检查该目录里面的文件
        exclude: /node_modules/  //排除这个目录里面的文件
      },

{

//这里有个query操作, 超过10KB的文件,对文件名做处理
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: ‘url‘,
        query: {
          limit: 10000,
          name: utils.assetsPath(‘img/[name].[hash:7].[ext]‘)
        }
      },
还有一个eslint, 做demo的时候我一般都直接去掉了,因为格式的错误提示很蓝瘦,有兴趣的可以Google

vue: {
//css文件配置,具体看utils.cssLoaders函数
    loaders: utils.cssLoaders({ sourceMap: useCssSourceMap }),
    postcss: [
      require(‘autoprefixer‘)({
        browsers: [‘last 2 versions‘]
      })
    ]
  }
dev-server.js

module.exports = app.listen(port, function (err) {//启动server监听端口,这里是8080,在dev里面配置
//通过localhost端口启动网页
  if (err) {
    console.log(err)
    return
  }
  var uri = ‘http://localhost:‘ + port
  console.log(‘Listening at ‘ + uri + ‘\n‘)

  // when env is testing, don‘t need open it
  if (process.env.NODE_ENV !== ‘testing‘) {
    opn(uri)
  }
})

最近在学vue.js 高仿饿了么的实战项目,有需要视频的告诉我,给链接。

时间: 2024-11-08 15:51:06

webpack 配置流程记录的相关文章

webpack基本打包配置流程

项目搭建以及webpack打包配置流程 创建文件夹EC(文件夹和文件名根据需求自定义) 在EC文件夹下新建文件夹APP 在APP文件夹下新建入口文件index.js 和运行该入口文件的index.html文件 在APP文件夹下新建两个js文件:a,js   b.js   (当项目级别如react项目,可以根据需求创建components文件夹等等,用于更好地管理模块化项目) APP/index.html <!DOCTYPE html> <html> <head> <

保证服务器高可用性-灾难恢复(2)APP服务器的配置流程

上一篇文章写到了灾难恢复中WEB服务器的配置.其实说白了很简单,就是在另一个地方模拟出原始服务器集群的环境. 这个文章主要谢谢APP服务器的配置. 灾难恢复呢,对于APP服务器来说,无非包括两方面的内容: DB的配置,保证新的服务器也能连接到特定的DB服务器. 可以接收到新的WEB服务器的请求. DB的配置呢,无非就是配置一下DabaSource,测试连接这些的,直接在管理控制台上就可以配置了.(记住有的时候配置完DB之后需要重启Application Server甚至Node Agent才会使

webpack配置这一篇就够

最近看了一篇好文,根据这个文章重新梳理了一遍webpack打包过程,以前的一些问题也都清楚了,在这里分享一下,同时自己也做了一些小的调整 原文链接:http://www.jianshu.com/p/42e11515c10f git项目地址:https://github.com/gengchen528/webpackSample 更多前端内容可以到:http://www.bloggeng.com/ 写在前面的话 阅读本文之前,先看下面这个webpack的配置文件,如果每一项你都懂,那本文能带给你的

关于log4net日志的配置流程

最近又重新整理一下log4net日志的配置,现在记录一下流程和一些遇到的问题,以备后续使用,具体的配置参数等信息.此文无,见谅! 1. 下载log4net.dll文件(网上很多,随便找一个!) 2. 项目中引用此dll 3. appconfig中配置log4net(具体配置方案有很多例子.) 4. AssemblyInfo.cs 中添加"[assembly: log4net.Config.XmlConfigurator(Watch = true)]" 5. winform中调用&quo

RFC4862 IPV6无状态地址自动配置 阅读记录

RFC4862 IPV6无状态地址自动配置 阅读记录 最近接触IPV6.首次接触RFC文档.之前总是以为,rfc标准都是已经实现好的,不需要自己实现,直接用就好了.现在才知道,rfc只是说明了实现的流程.具体实现还是要自己实现的.颠覆了自己的认知.下面就学习RFC 4862 关于ipv6无状态地址自动配置的学习记录如下. 第一章 引言在IPV6中,主机在决定如何自动配置它的接口时采取步骤如下.自动配置处理包括利用无状态自动配置生成链路本地地址(linklocal地址),生成全球地址,以及启动验证

细说 webpack 之流程篇

0.1. 引言 目前,几乎所有业务的开发构建都会用到 webpack .的确,作为模块加载和打包神器,只需配置几个文件,加载各种 loader 就可以享受无痛流程化开发.但对于 webpack 这样一个复杂度较高的插件集合,它的整体流程及思想对我们来说还是很透明的.那么接下来我会带你了解 webpack 这样一个构建黑盒,首先来谈谈它的流程. 0.2. 准备工作 1. webstorm 中配置 webpack-webstorm-debugger-script 在开始了解之前,必须要能对 webp

webpack配置之webpack.config.js文件配置

webpack配置之webpack.config.js文件配置 webpack.config.js webpack resolve 1.总是手动的输入webpack的输入输出文件路径,是一件非常繁琐的事情.我们尝试用文件的形式将输入输出文件夹配置好.新建一个js文件,并命名为webpack.config.js[目前只能命名为这个,不然程序不识别] webpack.config.js 2.在webpack.config.js文件内输入以下代码 module.exports = { entry: '

webpack 配置的探索

1   webpack  --display-modules  --display-chunks  可以展示出 打包的全部trunk webpack 配置 生成分析文件 webpack --profile --json > stats.json到一下网址分析 http://chrisbateman.github.io/webpack-visualizer/ 分析 CommonsChunkPlugin

保证服务器高可用性-灾难恢复(1)WEB服务器的配置流程

背景: 我们服务器的环境,是ESX server,上面跑了几十台虚拟的服务器.大部分都是虚拟的Windows服务器,然后呢每个应用程序都会有几台APP服务器然后安装Websphere来构建cluster来支持,Web服务器方面呢,既有IBM的HTTP server,也有IIS. 环境就是这样了,这次是为A地区的服务器集群做灾难恢复演练. 所谓灾难恢复呢,就是说假如说A地区的服务器集群所在地出现灾难了,地震了海啸了,怎么办?好,直接把所有的服务器都克隆出来然后恢复到B地区,然后通过配置服务器和应用