There are several lessons that will build on top of this project. It is a fairly standard, small webpack bundled project. In this lesson we’ll explore the project a bit so you’re familiar with how things are set up for future lessons.

In Webpack 2, the config take a fucntion, which accept a env param points to system env.

const {resolve} = require('path')
module.exports = env => {
return {
entry: './js/app.js',
output: {
filename: 'bundle.js',
path: resolve(__dirname, 'dist'),
pathinfo: !env.prod,
},
context: resolve(__dirname, 'src'),
devtool: env.prod ? 'source-map' : 'eval',
bail: env.prod,
module: {
loaders: [
{test: /\.js$/, loader: 'babel!eslint', exclude: /node_modules/},
{test: /\.css$/, loader: 'style!css'},
],
},
}
}

Package.json scripts:

  "scripts": {
"test": "karma start",
"check-coverage": "istanbul check-coverage --statements 23 --branches 5 --functions 9 --lines 24",
"watch:test": "npm test -- --auto-watch --no-single-run",
"validate": "npm-run-all --parallel validate-webpack:* lint test --serial check-coverage",
"validate-webpack:dev": "webpack-validator webpack.config.js --env.dev",
"validate-webpack:prod": "webpack-validator webpack.config.js --env.prod",
"clean-dist": "rimraf dist",
"copy-files": "cpy src/index.html src/favicon.ico dist",
"clean-and-copy": "npm run clean-dist && npm run copy-files",
"prestart": "npm run clean-and-copy",
"start": "webpack-dev-server --env.dev --content-base dist",
"prebuild": "npm run clean-and-copy",
"prebuild:prod": "npm run clean-and-copy",
"build": "webpack --env.dev",
"build:prod": "webpack --env.prod -p",
"lint": "eslint .",
"setup": "npm install && npm run validate"
}

[Webpack 2] Intro to the Production Webpack Course的更多相关文章

  1. webpack入门和实战(一):webpack配置及技巧

    一.全面理解webpack 1.什么是 webpack? webpack是近期最火的一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX).coffee.样式(含less/sass).图片等都 ...

  2. 【Webpack的使用指南 02】Webpack的常用解决方案

    说是解决方案实际上更像是webpack的插件索引. 写这一篇的目的是为了形成一个所以,将来要用时直接来查找即可. 索引目录 1.自动构建HTML,可压缩空格,可给引用的js加版本号或随机数:html- ...

  3. webpack从零开始第1课:安装webpack和webpack-dev-server

    原文地址:https://segmentfault.com/a/1190000012536871 webpack目录 第1课: 安装webpack和webpack-dev-server 第2课: 配置 ...

  4. Webpack + Vue 多页面项目升级 Webpack 4 以及打包优化

    0. 前言 早在 2016 年我就发布过一篇关于在多页面下使用 Webpack + Vue 的配置的文章,当时也是我在做自己一个个人项目时遇到的配置问题,想到别人也可能遇到跟我同样的问题,就把配置的思 ...

  5. [js高手之路]深入浅出webpack教程系列3-配置文件webpack.config.js详解(下)

    本文继续接着上文,继续写下webpack.config.js的其他配置用法. 一.把两个文件打包成一个,entry怎么配置? 在上文中的webpack.dev.config.js中,用数组配置entr ...

  6. webpack学习(一):webpack 介绍&安装&常用命令

    一.简单介绍 什么是Webpack Webpack是一款用户打包前端模块的工具,它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源. 主要是用来打包在浏览器端使用的ja ...

  7. 【Webpack的使用指南 01】Webpack入门

    使用Webpack有一段时间了,但是感觉之前学的用的都比较零散,所以在这里整理一下Webpack的使用知识,从入门到进阶. 创建项目 首先创建最简单的一个项目 npm init 得到以下项目结构: 安 ...

  8. webpack学习笔记一:安装webpack、webpack-dev-server、内存加载js和html文件、loader处理非js文件

    一 .webpack学习环境准备: 1:window系统 2:安装node.js  官方网址 下载好后下一步下一步安装即可 安装步骤略过....... 3:nrm的安装 打开cmd命令控制台 输入:n ...

  9. webpack dllPlugin使用(基于vue-cli webpack模板)

    由于本例单入口时打包的文件体积过大,将其分成多入口. 主要涉及到的几个文件为: /index.html, /webpack.dll.config.js, /build/webpack.base.con ...

随机推荐

  1. 可以用来开发h5的软件小结

    webStorm phoneGap notepad++ eclips text sublime dreamWeaver intellij idea 学习h5 需要掌握的  大块的知识 xhtml ja ...

  2. Cocos2d-x 3.0 beta 中加入附加项目,解决无法打开包括文件:“extensions/ExtensionMacros.h”: No such file or directory”

    Cocos2d-x 3.0 Alpha 1开始 对目录结构进行了整合.结果有些附加项目也被在项目中被精简出去. 比如说如果你需要使用CocoStdio导出的JSON.或使用Extensions扩展库, ...

  3. PS字体工具字体显示不出来

    显示一个小点:搜索了各种答案,扩大字号(最大72)更改前景色和背景色,最正确的解释就是分辨率太低,我发现分辨率是1,一般的设置成300,1分辨率情况下可以在图层那选择文字图层,然后按ctrl+t,拉大 ...

  4. SSH框架是个怎么回事?

    我相信来看这篇文章的童鞋基本上是刚开始入门正在努力找方向的,所以我将尽可能的少涉及旁枝末节及背景知识,力求简明易懂.当然高手们如果在读了小文之后发现了任何错误和不妥,请不吝指正. 直接进入正题.现在我 ...

  5. NAND Flash内部结构简介

    介绍     1965年,在双极管被W.Shockley.W.Brattain和J.Bardeen三人发明出来之后,Intel的合作创始人Gordon Moore发现了这样一条法则:当价格不变时,集成 ...

  6. windows 挂载windows 共享盘为本地磁盘

    我们在设置数据库自动备份时,为了数据的安全往往需要直接将数据备份到远程服务器上.在Linux可以通过NFS挂载来实现,在Windows平台可以直接通过net use+subst来实现将远程服务器的目录 ...

  7. 字符串匹配的KMP算法(转)

    转载:http://kb.cnblogs.com/page/176818/ 字符串匹配是计算机的基本任务之一. 举例来说,有一个字符串"BBC ABCDAB ABCDABCDABDE&quo ...

  8. BZOJ2295: 【POJ Challenge】我爱你啊

    2295: [POJ Challenge]我爱你啊 Time Limit: 1 Sec  Memory Limit: 128 MBSubmit: 126  Solved: 90[Submit][Sta ...

  9. 新浪微博授权时出现"关注 *** 的微博"

    基本设置完成后, 保证scope是 "all" 或 至少 包含 "follow_app_official_microblog". 测试时, 保证你的测试账号没有 ...

  10. (转载)LINUX UNBUNTU10.04 下 搭建OC编译环境

    (转载)http://blog.sina.com.cn/s/blog_833996210100rgl4.html 1安装 / install GNUstep on ubuntu 下面列出来的包是安装G ...