[Webpack 2] Intro to the Production Webpack Course
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的更多相关文章
- webpack入门和实战(一):webpack配置及技巧
一.全面理解webpack 1.什么是 webpack? webpack是近期最火的一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX).coffee.样式(含less/sass).图片等都 ...
- 【Webpack的使用指南 02】Webpack的常用解决方案
说是解决方案实际上更像是webpack的插件索引. 写这一篇的目的是为了形成一个所以,将来要用时直接来查找即可. 索引目录 1.自动构建HTML,可压缩空格,可给引用的js加版本号或随机数:html- ...
- webpack从零开始第1课:安装webpack和webpack-dev-server
原文地址:https://segmentfault.com/a/1190000012536871 webpack目录 第1课: 安装webpack和webpack-dev-server 第2课: 配置 ...
- Webpack + Vue 多页面项目升级 Webpack 4 以及打包优化
0. 前言 早在 2016 年我就发布过一篇关于在多页面下使用 Webpack + Vue 的配置的文章,当时也是我在做自己一个个人项目时遇到的配置问题,想到别人也可能遇到跟我同样的问题,就把配置的思 ...
- [js高手之路]深入浅出webpack教程系列3-配置文件webpack.config.js详解(下)
本文继续接着上文,继续写下webpack.config.js的其他配置用法. 一.把两个文件打包成一个,entry怎么配置? 在上文中的webpack.dev.config.js中,用数组配置entr ...
- webpack学习(一):webpack 介绍&安装&常用命令
一.简单介绍 什么是Webpack Webpack是一款用户打包前端模块的工具,它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源. 主要是用来打包在浏览器端使用的ja ...
- 【Webpack的使用指南 01】Webpack入门
使用Webpack有一段时间了,但是感觉之前学的用的都比较零散,所以在这里整理一下Webpack的使用知识,从入门到进阶. 创建项目 首先创建最简单的一个项目 npm init 得到以下项目结构: 安 ...
- webpack学习笔记一:安装webpack、webpack-dev-server、内存加载js和html文件、loader处理非js文件
一 .webpack学习环境准备: 1:window系统 2:安装node.js 官方网址 下载好后下一步下一步安装即可 安装步骤略过....... 3:nrm的安装 打开cmd命令控制台 输入:n ...
- webpack dllPlugin使用(基于vue-cli webpack模板)
由于本例单入口时打包的文件体积过大,将其分成多入口. 主要涉及到的几个文件为: /index.html, /webpack.dll.config.js, /build/webpack.base.con ...
随机推荐
- 可以用来开发h5的软件小结
webStorm phoneGap notepad++ eclips text sublime dreamWeaver intellij idea 学习h5 需要掌握的 大块的知识 xhtml ja ...
- Cocos2d-x 3.0 beta 中加入附加项目,解决无法打开包括文件:“extensions/ExtensionMacros.h”: No such file or directory”
Cocos2d-x 3.0 Alpha 1开始 对目录结构进行了整合.结果有些附加项目也被在项目中被精简出去. 比如说如果你需要使用CocoStdio导出的JSON.或使用Extensions扩展库, ...
- PS字体工具字体显示不出来
显示一个小点:搜索了各种答案,扩大字号(最大72)更改前景色和背景色,最正确的解释就是分辨率太低,我发现分辨率是1,一般的设置成300,1分辨率情况下可以在图层那选择文字图层,然后按ctrl+t,拉大 ...
- SSH框架是个怎么回事?
我相信来看这篇文章的童鞋基本上是刚开始入门正在努力找方向的,所以我将尽可能的少涉及旁枝末节及背景知识,力求简明易懂.当然高手们如果在读了小文之后发现了任何错误和不妥,请不吝指正. 直接进入正题.现在我 ...
- NAND Flash内部结构简介
介绍 1965年,在双极管被W.Shockley.W.Brattain和J.Bardeen三人发明出来之后,Intel的合作创始人Gordon Moore发现了这样一条法则:当价格不变时,集成 ...
- windows 挂载windows 共享盘为本地磁盘
我们在设置数据库自动备份时,为了数据的安全往往需要直接将数据备份到远程服务器上.在Linux可以通过NFS挂载来实现,在Windows平台可以直接通过net use+subst来实现将远程服务器的目录 ...
- 字符串匹配的KMP算法(转)
转载:http://kb.cnblogs.com/page/176818/ 字符串匹配是计算机的基本任务之一. 举例来说,有一个字符串"BBC ABCDAB ABCDABCDABDE&quo ...
- BZOJ2295: 【POJ Challenge】我爱你啊
2295: [POJ Challenge]我爱你啊 Time Limit: 1 Sec Memory Limit: 128 MBSubmit: 126 Solved: 90[Submit][Sta ...
- 新浪微博授权时出现"关注 *** 的微博"
基本设置完成后, 保证scope是 "all" 或 至少 包含 "follow_app_official_microblog". 测试时, 保证你的测试账号没有 ...
- (转载)LINUX UNBUNTU10.04 下 搭建OC编译环境
(转载)http://blog.sina.com.cn/s/blog_833996210100rgl4.html 1安装 / install GNUstep on ubuntu 下面列出来的包是安装G ...