webpack配置的说明
{
devtool: 'source-map',
//要启用source-map需加上此配置项,同时css或less的loader要加上参数?sourceMap,js的loader不用加
entry: entries,
output: {
path: './assets/',
filename: '[name].js',
},
resolve: {
extensions: ['', '.js', '.jsx', '.less', '.css'],
//用于指明程序自动补全识别哪些后缀,注意一下,extensions 第一个是空字符串,对应不需要后缀的情况。
alias: {
'jquery': './js/vendor/jquery',
}
//使用别名,对模块请求重定向,据说可以缩短打包时间
},
externals: {
'./src/html/js/swiper': 'Swiper'
// externals对象的key是给require时用的,比如require('react'),对象的value表示的是如何在global(即window)中访问到该对象,这里是window.React。
},
module: {
loaders: [
{test: /\.(js|jsx)$/, exclude: /node_modules/, loader: 'babel', query: {presets: ['es2015', 'react']}},
//exclude是排除的目录或文件,使用正则
//使用babel做jsx打包,需加上babel-preset-react和babel-preset-es2015这2个npm包,并加上loader参数presets: ['es2015', 'react']
{test: /\.less$/, loader: ExtractTextPlugin.extract(['css?sourceMap!postcss!less?sourceMap'])},
//要使用autoprefixer,需使用postcss,autoprefixer是postcss的一个插件
//要启用sourceMap必须加上参数sourceMap
{test: /\.(eot|ttf)$/, loader: 'copy-file?copyto=[path][name].[ext]&context=' + srcPath},
{test: /\.(jpe?g|png|gif|svg|swf)$/, loader: 'copy-file?limit=10000©to=[path][name].[ext]&context=' + srcPath},
//可以使用copy-file-loader让less中所引用的文件路径在打包成css之后保持不变
]
},
postcss: function(){
return {
defaults: [autoprefixer],
cleaner: [autoprefixer({browsers: ['IE >= 9']})]
};
},
//postcss的相关设置,这里只设了autoprefixer
plugins: [
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
}),
//启用代码压缩
new webpack.ProvidePlugin({
'$': 'jquery'
}),
//将模块暴露在window下
new webpack.optimize.CommonsChunkPlugin({
name: ['common'],
minChunks: 2
}),
//将公共模块打包到一个公共文件中
//minChunks的值决定有多少个entry文件调用了相同模块,才打包进公共文件中
new ExtractTextPlugin('[name].css'),
//将css文件打包成独立文件
]
}
webpack配置的说明的更多相关文章
- [webpack] 配置react+es6开发环境
写在前面 每次开新项目都要重新安装需要的包,简单记录一下. 以下仅包含最简单的功能: 编译react 编译es6 打包src中入口文件index.js至dist webpack配置react+es6开 ...
- webpack配置详解
webpack配置详解 先点个赞吧,再挨个点下面的连接,觉得不值这个赞的回来骂我啊. Webpack傻瓜式指南(一) Webpack傻瓜指南(二)开发和部署技巧 Webpack傻瓜式指南 原生的官网详 ...
- Webpack配置示例和详细说明
/* * 请使用最新版本nodejs * 默认配置,是按生产环境的要求设置,也就是使用 webpack -p 命令就可以生成正式上线版本. * 也可以使用 webpack -d -w 命令,生成用于开 ...
- vue-cli#2.0 webpack 配置分析
目录结构: ├── README.md ├── build │ ├── build.js │ ├── check-versions.js │ ├── dev-client.js │ ├── dev-s ...
- webpack配置这一篇就够
最近看了一篇好文,根据这个文章重新梳理了一遍webpack打包过程,以前的一些问题也都清楚了,在这里分享一下,同时自己也做了一些小的调整 原文链接:http://www.jianshu.com/p/4 ...
- webpack配置报错:invalid configuration object.webpack has been initialisted using a configuration objcet that does not match thie API schema
最近接收了别人的项目,webpack配置总是报错如下:最后找到了解决办法,在此分享一下: 错误情况: 解决办法: 将package.json里面的colors删除掉即可
- 前端工程化(二)---webpack配置
导航 前端工程化(一)---工程基础目录搭建 前端工程化(二)---webpack配置 前端工程化(三)---Vue的开发模式 前端工程化(四)---helloWord 继续上一遍的配置,本节主要记录 ...
- vue全家桶安装以及修改webpack配置新增vue项目启动方式
一.安装node环境(自带npm) 下载地址 二.替换下载源 // 淘宝 NPM 镜像 npm install -g cnpm --registry=https://registry.npm.taob ...
- vue-cli中webpack配置详解
vue-cli是构建vue单页应用的脚手架,命令行输入vue init <template-name> <project-name>从而自动生成的项目模板,比较常用的模板有we ...
- storybook配置之基本配置和webpack配置
默认配置 Storybook有一个默认的适合(suits)大型项目开发的webpack配置,假如你使用react app,他类似于创建一个react app的配置,并经过调整(tweaked ),使其 ...
随机推荐
- UVA1401 (字典树加简单dp)
#pragma GCC optimize(2) #include <bits/stdc++.h> #define ll long long using namespace std; ; ; ...
- commons-dbutils实现增删改查(spring新注解)
1.maven依赖 <?xml version="1.0" encoding="UTF-8"?> <project xmlns="h ...
- java连接Sqlserver数据库问题总结
网上说的要在:Sqlserver配置管理器中设置SQL Server网络配置->SQLEXPRESS的协议->TCP/IP的方法试了没啥用 不知道是不是自己测试设置的时候改了啥参数给整好了 ...
- npx是什么
npx是一个执行npm软件包的二进制文件,通俗的讲,他可以执行npm的一些指令 在npm>5.2.0 的时候npm里面就集成了npx 比如npx webpack 他会执行node_modules ...
- python3练习100题——039
原题链接:http://www.runoob.com/python/python-exercise-example39.html 题目:有一个已经排好序的数组.现输入一个数,要求按原来的规律将它插入数 ...
- JavaDay2(上)
Java learning_Day2(上) 本人学习视频用的是马士兵的,也在这里献上 <链接:https://pan.baidu.com/s/1qKNGJNh0GgvlJnitTJGqgA> ...
- 栈和队列----设计一个有getMin功能的栈
设计一个有getMin功能的栈 设计一个具有getMin功能的栈,可以返回栈中的最小的元素,可以使用现有的栈的数据结构,要求pop/push/getMin操作的时间复杂度是O(1). package ...
- Your name ?
序言 才发觉自己有许多名字 ··································································· 言归正传 今天才发现,自己在不同地方 ...
- Linux系统搭建Java环境【JDK、Tomcat、MySQL】一篇就够
前言:所有项目在完成开发后都会部署上线的,一般都是用Linux系统作为服务器的,很少使用Windows Server(大多数项目的开发都是在Windows桌面系统完成的),一般有专门负责上线的人员 ...
- 1、安装gitlab
1.安装Gitlab Gitlab分为社区版和企业版(收费),这里安装的是ce社区版本 方式一: Gitlab官方有提供好的rpm包仓库,所以采用yum安装即可. [root@localhost ~] ...