Webpack配置示例和详细说明
/*
* 请使用最新版本nodejs
* 默认配置,是按生产环境的要求设置,也就是使用 webpack -p 命令就可以生成正式上线版本。
* 也可以使用 webpack -d -w 命令,生成用于开发调试的代码。
* 通常开发使用 node server.dev.js 命令 , server.dev.js基于此配置做了特殊处理, 主要是为了自动刷新和热更新, 这个服务只是在内存中生成缓存文件,不会在硬盘中生成文件。
* webpack配置,如果出现问题,通常都是路径问题造成的
*
* 常用命令看package.json中配置的scripts,比如
* "scripts": {
* "d": "node server.dev.js",
* "reset:dist": "rm -fr dist && mkdir -p dist/build && cp -r src/lib dist",
* "p": "npm run reset:dist && ./node_modules/.bin/webpack -p --display-error-details --progress --colors"
* }
*/ //导入Node.js的path模块,主要用来转换成绝对路径,比如path.resolve(__dirname, 'build')
const path = require('path'); //导入webpack整个模块
//也可以不导入webpack整个模块,而值导入用到的内置插件模块
//比如 var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");
//这样后面使用方式为 new CommonsChunkPlugin
//否则为new webpack.optimize.CommonsChunkPlugin
const webpack = require('webpack'); //导入ExtractTextPlugin插件,作用提取代码中的css生成独立的CSS文件
const ExtractTextPlugin = require('extract-text-webpack-plugin'); //导入HtmlWebpackPlugin插件,作用按需求生成html页面,想用好,挺麻烦的,可以不用
const HtmlWebpackPlugin = require('html-webpack-plugin'); //打包配置 webpack配置,多数同时支持String, Array or Object的写法。单字符串的形式用于简单情况,key-value对象的形式用于复杂情况。
const config = { // 入口文件配置,打包输出的来源
// 多种写法 entry:'entry.js' or entry:{entry1:'entry1.js'} or entry:{entry1:['entry1a.js', ...]} or etc.
// 通常用path.resolve(__dirname, 'src/entry.js')转换成绝对路径,也可以使用相对路径,比如 './src/entry.js'
entry: {
index: [path.resolve(__dirname, 'src/index.js')],
edit: [path.resolve(__dirname, 'src/edit.js')]
}, //输出配置
//path 输出目录 通常用path.resolve(__dirname, 'build')转换成绝对路径,也可以使用相对路径,比如 './build'
//publicPath 开发代码中url的转换拼接处理,通常是代码中各种资源的地址,比如图片等, url目录前缀或完整网址url前缀'http://cdn.com/'
//filename 输出js文件名,[name]对应entry对象键名,也可以指定名字,加上id和hash可以避免缓存问题,webpack会用实际值替换类似[hash]这样字符串
output: {
path: path.resolve(__dirname, 'dist/build'),
publicPath: './build/',
filename: '[name].[id].[hash].js', }, //路径解析配置
resolve: {
//自行补全路径中文件的后缀, 第一个是空字符串,对应不需要后缀的情况
extensions: ['', '.webpack.js', '.web.js', '.js', '.jsx']
}, //模块
module: {
//loaders: 加载器
// [
// {
// test:正则表达式,匹配的文件名则使用这个加载器。
// include: 匹配的目录则进一步处理
// exclude: 匹配的目录则排除
// loader: `!`用于分隔loader 字符串形式,作用和数组形式一样
// loaders: ['loader',...] 数组形式,作用和字符串形式一样
// }
// ]
//
// 如果同一文件需要多个loaders处理,也就是使用loaders: ['loader',...] 数组形式,loader的参数不能使用query:{}写法了。只能用拼接字符串写法。
loaders: [
{
//加载css资源,默认写法loader:'style-loader!css-loader' css为Internal内部形式
//ExtractTextPlugin插件写法用于生成独立的css文件,用于external link形式
//生成的独立CSS文件中的url图片地址的publicPath,通常JS中的publicPath不一样,如果一样可以不设置
test: /\.css$/,
loader: ExtractTextPlugin.extract(
'style-loader',
'css-loader',
{
publicPath: "./"
}
)
},
{
//url-loader处理图片URL,如果图片小于limit值直接生成`base64` 格式的`dataUrl`,否则输出图片,name参数指定输出目录和图片名
//url-loader依赖file-loader
//image-webpack-loader是用来压缩图片的,主要是透明PNG
test: /\.(jpe?g|png|gif|svg)$/i,
loaders: [
'url-loader?limit=8192&name=img/[name].[hash].[ext]',
'image-webpack-loader?{progressive:true, optimizationLevel: 7, interlaced: false, pngquant:{quality: "65-90", speed: 4}}'
]
},
{
//用babel转码器加载有es2015和jsx语法的js,输出为es5语法的js,注意这里只是语法转码。
//如果开发代码中有用到新ES规范中的新对象或属性方法还需要babel-polyfill才能转码成ES5代码
//class-properties和object-rest-spread,是转码类属性写法和非数组对象的延展符...,新React常用到的写法,但还不是ES2015规范
//query对象和.babelrc配置文件内容一致,必须都写,不然使用webpack的babel-loader会报错.
test: /\.jsx?$/,
exclude: /(node_modules|lib)/,
loader: 'babel-loader',
query: {
presets: ['es2015', 'react'],
plugins: ['transform-class-properties', 'transform-object-rest-spread']
}
} ]
}, //script引入js类库,通过require或import的方式来使用,却不希望webpack把它编译到输出文件中。
//比如不想这么用 const $ = window.jQuery 而是这么用 const $ = require("jquery") or import $ from "jquery"; 则配置"jquery": "jQuery"
//键名是require或from时的字符串,键值是js内的全局变量名
externals: {
'react': 'React',
'react-dom': 'ReactDOM',
'baidu-hmt': 'window._hmt',
'lrz': 'lrz',
'iscroll': 'IScroll',
'zepto': 'Zepto',
'fabric': 'fabric',
'react-slick': 'Slider'
}, plugins: [
//输出独立的css文件,用于external link形式,如果有多个入口JS共用的CSS,会生成commons.css
new ExtractTextPlugin('[name].[id].[hash].css'), //把entry中配置的多个js中共用代码提取生成为单个js, 多参数写法 new webpack.optimize.CommonsChunkPlugin("commons", "commons.js")
new webpack.optimize.CommonsChunkPlugin({
name: "commons",
filename: "commons.[id].[hash].js"
}), //按需求生成HTML页面
//template 模板位置
//inject: 'body' js插入在body元素内部的最后
//chunks 对应入口文件名
//filename 生成的文件名,可以带上路径
//options参数对象的值可以自定义,比如这里的libJS
//在模板页中可以获得和使用这些数据,可以在模板页中使用<%= JSON.stringify(htmlWebpackPlugin) %>;输出查看所有可用的数据
new HtmlWebpackPlugin({
template: 'src/template.html',
inject: 'body',
chunks: ['commons', 'index'],
filename: '../index.html',
title: '最美奥运脸',
libJS: [
//上拉下拉
'./lib/js/iscroll-lite.min.js'
]
}),
new HtmlWebpackPlugin({
template: 'src/template.html',
inject: 'body',
chunks: ['commons', 'edit'],
filename: '../edit.html',
title: '最美奥运脸',
libJS: [
//切换左右拖动
'./lib/js/react-slick.min.js',
//编辑图片
'./lib/js/fabric.min.js'
]
}) //ProvidePlugin的作用就是在开发代码内不需要require('react')或import ... from ... 也能使用React
// ,new webpack.ProvidePlugin({
// React: 'react',
// ReactDOM: 'react-dom'
// }) //压缩代码,命令行的 webpack -p 会默认使用这个插件压缩代码
// ,new webpack.optimize.UglifyJsPlugin({
// compress: {
// warnings: false
// }
// }) ] //webpack-dev-server的配置, 通常弄成独立的文件,比如server.js,
//或者使用命令行形式,比如npm scripts命令行形式,类似webpack-dev-server -d --inline --hot
//弄webpack-dev-server通常是为了自动刷新和热更新,配置麻烦
// devServer: {
// contentBase: './',
// host: 'h5.baofeng.com',
// port: 9090, //默认8080
// inline: true //监控文件变化,自动重加载整个页面
// } }; // babel-polyfill用来转换ES2015新的对象和方法,在入口数组中,babel-polyfill必须在入口文件字符串前面,并且必须在入口文件代码的第一行import或require 'babel-polyfill'
for (let prop in config.entry) {
config.entry[prop].unshift(
'babel-polyfill'
);
} module.exports = config;
Webpack配置示例和详细说明的更多相关文章
- Webpack 配置示例
Webpack 作为前端构建工具,对于大型网站开发,大大提升了开发效率.要使用webpack需要先安装webpack工具: 先来看一个最简单的命令 $ webpack main.js bundle.j ...
- webpack配置示例
var webpack = require('webpack'); var commonsPlugin = new webpack.optimize.CommonsChunkPlugin('commo ...
- 对vue中 默认的 config/index.js:配置的详细理解 -【以及webpack配置的理解】-config配置的目的都是为了服务webpack的配置,给不同的编译条件提供配置
当我们需要和后台分离部署的时候,必须配置config/index.js: 用vue-cli 自动构建的目录里面 (环境变量及其基本变量的配置) var path = require('path') ...
- webpack配置这一篇就够
最近看了一篇好文,根据这个文章重新梳理了一遍webpack打包过程,以前的一些问题也都清楚了,在这里分享一下,同时自己也做了一些小的调整 原文链接:http://www.jianshu.com/p/4 ...
- vue-cli脚手架中webpack配置基础文件详解
一.前言 原文:https://segmentfault.com/a/1190000014804826 vue-cli是构建vue单页应用的脚手架,输入一串指定的命令行从而自动生成vue.js+wep ...
- webpack配置详解
webpack配置详解 先点个赞吧,再挨个点下面的连接,觉得不值这个赞的回来骂我啊. Webpack傻瓜式指南(一) Webpack傻瓜指南(二)开发和部署技巧 Webpack傻瓜式指南 原生的官网详 ...
- vue-cli#2.0 webpack 配置分析
目录结构: ├── README.md ├── build │ ├── build.js │ ├── check-versions.js │ ├── dev-client.js │ ├── dev-s ...
- 【转】android 最新 NDK r8 在window下开发环境搭建 安装配置与使用 详细图文讲解,完整实际配置过程记录(原创)
原文网址:http://www.cnblogs.com/zdz8207/archive/2012/11/27/android-ndk-install.html android 最新 NDK r8 在w ...
- linux下编译qt5.6.0静态库——configure配置(超详细,有每一个模块的说明)(乌合之众)
linux下编译qt5.6.0静态库 linux下编译qt5.6.0静态库 configure生成makefile 安装选项 Configure选项 第三方库: 附加选项: QNX/Blackberr ...
随机推荐
- android MotionEvent 获取长按压时间长
思路: 1.记录ACTION_DOWN的aX, aY坐标: 2.在ACTION_MOVE判断是否移动,移动则取消记录时间,没移动就记录: 3.记录时间,按下坐标,移动坐标分别显示在TextView a ...
- 在Windows下配置Python+Django+Eclipse开发环境
一.配置开发环境我的开发环境是:Python2.6.7 + Django1.6.2 + Eclipse1.安装Python2.安装Eclipse的Python插件PyDev如上两步如何操作请点击此进行 ...
- sql in按照指定顺序排序
如下 Select * FROM table1 ,,,,) order by field (3,5,1,4,2)
- 【转帖】4412ARM开发板学习笔记(一)
本文转自迅为论坛:http://www.topeetboard.com 新手在进行开发学习前,建议先看01-迅为电子开发板入门视频.对开发板和开发环境有一定的了解后,不要盲目接线开机.以下是个人的一点 ...
- Docker on Microsoft Azure
Docker蓬勃发展,如日中天.微软自然也不甘落后,且不说即将发布的.支持Docker技术的Windows Nano Server和Windows Server 2016.我们来看看在Microsof ...
- 连载《一个程序猿的生命周期》-28、被忽悠来的单身HR(女同志)
一个程序猿的生命周期 微信平台 口 号:职业交流,职业规划:面对现实,用心去交流.感悟. 公众号:iterlifetime 百木-ITer职业交流奋斗 群:141588103 微 博:h ...
- 洛谷P1141 01迷宫
题目描述 有一个仅由数字0与1组成的n×n格迷宫.若你位于一格0上,那么你可以移动到相邻4格中的某一格1上,同样若你位于一格1上,那么你可以移动到相邻4格中的某一格0上. 你的任务是:对于给定的迷宫, ...
- UNITY3D中涉及的一些数学知识
3D中的法线是什么意思啊~ 在空间垂直于一个平面的直线:或者在一个平面里面,垂直于一条直线的直线.法线也可以指的某个方向.对于圆弧来讲,指的是它与圆心相连的直线(方向).法线:英语叫Normal Li ...
- 利用T-Sql语句中的二重循环打印乘法口诀表
--定义三个初始化变量 declare @a int,@b int,@c varchar(200) --对@a进行赋值 set @a=1 --循环输出9次,@a为被乘数 while(@a<=9) ...
- poj2632 Crashing Robots
Crashing Robots Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 9859 Accepted: 4209 D ...