[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 ...
随机推荐
- java项目打成jar包时引用了第三方jar,此时我们该如何解决呢
Web项目做多了,反而对单纯的java项目陌生了,今天我们在开发项目的过程中,碰到一个这样的需求:需要将java项目放到linux系统上跑起来,当然这个javaSE项目是带main方法的.我们知道在I ...
- Python还是很重要的,不能丢。学习IF和WHILE
number = 23 guess = int(input('Enter an interger : ')) if guess == number: print('Congratulations, y ...
- 【HDU 1533】 Going Home (KM)
Going Home Problem Description On a grid map there are n little men and n houses. In each unit time, ...
- Eclipse怎样导入github上的项目
国外有些比较好的源代码网站,经常需要从这些网站上导入项目到eclipse中,我最近就发现github.com这个网站上有很多开源项目.这里就以从github网站上导入项目到eclipse中为例来详细的 ...
- SpringSecurity简单应用(二)
这里我首先对我上一篇博文的第三个实例做一下讲解,下面是applicationContext-security.xml内容如下: <?xml version="1.0" enc ...
- HDU 4081 Qin Shi Huang's National Road System
步骤是先求最小生成树,然后选两个不同的点,遍历所有的这样的点,选出两点人口比较大,而且连通两点的边的最大边比较大的情况. 因此要对i,j点连接起来的边进行遍历. #include<stdio.h ...
- Jquery UI dialog 传参
[一篮饭特稀原创,转载请注明出自http://www.cnblogs.com/wanghafan/p/3519318.html] $("#dialog").dialog({ aut ...
- 利用TEA算法进行数据加密
TEA(Tiny Encryption Algorithm)是一种小型的对称加密解密算法,最初是由剑桥计算机实验室的 David Wheeler 和 Roger Needham 在 1994 年设计. ...
- MySQL查询原理及其慢查询优化案例分享(转)
MySQL凭借着出色的性能.低廉的成本.丰富的资源,已经成为绝大多数互联网公司的首选关系型数据库.虽然性能出色,但所谓“好马配好鞍”,如何能够更 好的使用它,已经成为开发工程师的必修课,我们经常会从职 ...
- ubuntu下eclipse突然崩溃,解决办法
rm YOUR_WORKSPACE/.metadata/.plugins/org.eclipse.core.resources/.snap 抛出的一场如下: !SESSION 2013-09-30 1 ...