webpack 基本配置 - 01

 1 const webpack = require(‘webpack‘);
 2 const path = require(‘path‘);
 3 const HtmlWebpackPlugin = require(‘html-webpack-plugin‘);
 4 const ExtractTextPlugin = require("extract-text-webpack-plugin");
 5 const CleanPlugin = require(‘clean-webpack-plugin‘);
 6
 7 const PATH = {
 8      src:path.join(__dirname, ‘src‘),
 9      build:path.join(__dirname, ‘build‘)
10 }
11
12 module.exports ={
13
14     entry:{
15         app:PATH.src,
16         // vendor:[
17         //     PATH.src+‘/common/jquery‘,
18         //     PATH.src+‘/common/layer/layer‘
19         // ]
20     },
21     output:{
22         // publicPath 配置上线时的路径
23         // 可有效解决css loader 和url loader路径不一致问题
24         publicPath:‘/‘,
25         path:PATH.build,
26         filename:‘./js/[name].js‘,
27         chunkFilename:‘./js/[name].chunck.js‘
28     },
29     module:{
30         loaders:[
31             {
32                 test:/\.(png|gif|jpg|jpeg)$/,
33                 exclude: /node_modules/,
34                 loader:‘url?limit=7000&name=images/[name].[ext]‘,
35             },
36             {
37                 test:/\.css$/,
38                 exclude: /node_modules/,
39                 loader: ExtractTextPlugin.extract("style-loader", "css-loader")
40             }
41         ]
42     },
43     plugins:[
44         new CleanPlugin([‘build‘]),
45         new ExtractTextPlugin(‘css/[name].css‘),
46         new HtmlWebpackPlugin({
47             title:‘webpack demo‘,
48         }),
49         // 压缩
50         // new webpack.optimize.UglifyJsPlugin({
51         //     compress:{
52         //         warnings:false
53         //     }
54         // })
55     ],
56     devServer: {
57         compress:true,
58        inline: true,
59        compiler:{
60                hot:true
61        }
62
63     }
64
65 }
时间: 2024-12-28 14:44:09

webpack 基本配置 - 01的相关文章

Webpack + React 开发 01 HelloWorld

1.项目依赖 安装所需要依赖的其它第三方开源库,项目依赖如下: "dependencies": { "babel-core": "^6.21.0", "babel-loader": "^6.2.10", "babel-preset-es2015": "^6.18.0", "babel-preset-react": "^6.16.0&quo

webpack实用配置

前面的话 上文介绍了webpack入门,本文将详细介绍webpack实用配置 版本号 以entry.js打包为bundle.js为例,出口的filename可以设置为[id].[name].[hash].[chunkhash]等替换形式,如下所示 var webpack = require('webpack'); module.exports = { entry: './entry.js', //入口文件 output: { path: __dirname,//出口路径 filename: '[

webpack安装配置使用教程详解

webpack安装配置使用教程详解 www.111cn.net 更新:2015-09-01 编辑:swteen 来源:转载 本文章来为各位详细的介绍一下关于webpack安装配置使用教程吧,这篇文章对于不喜欢使用 jspm测试的朋友可以参考一下. webpack 入门 目录 1 安装 webpack2 初始化项目3 webpack 配置4 自动刷新5 第三方库6 模块化7 打包.构建8 webpack 模板我最近大量使用的是 jspm,但因为用它搭建的前端开发环境中,写测试代码非常困难,而项目又

web.xml 文件配置01

web.xml 文件配置01 前言:一般的web工程中都会用到web.xml,方便开发web工程.web.xml主要用来配置Filter.Listener.Servlet等.但是要说明的是web.xml并不是必须的,一个web工程可以没有web.xml文件. 1.定义头和根元素 部署描述符文件就像所有XML文件一样,必须以一个XML头开始.这个头声明可以使用的XML版本并给出文 件的字符编码.web.xml的模式文件是由Sun公司定义的,每个web.xml文件的根元素<web-app>中,都必

vue 一些webpack的配置详解

最近一直在忙着做项目 本来想养成一个经常跟新博客的习惯 , 但是实在是太难了 , 每天加班到10点多 .8点能下班都是最好的了 , 小公司真不好待呀 分享一下最近半年的vue心得吧 我的项目是在他的基础上改的 PanJiaChen/vueAdmin-template vuex 咋web上我觉得是鸡肋 , 用户刷新页面直接就没了........... 这是我的目录 , 现在我遇到一个瓶颈  , 就是如何优化 build 的速度问题 , 这个问题随着页面原来越多已经发展到越来越恐怖的地方了现在打包一

webpack详细配置解析

阅读本文之前,先看下面这个webpack的配置文件,如果每一项你都懂,那本文能带给你的收获也许就比较有限,你可以快速浏览或直接跳过:如果你和十天前的我一样,对很多选项存在着疑惑,那花一段时间慢慢阅读本文,你的疑惑一定一个一个都会消失:如果你以前没怎么接触过Webpack,而你又你对webpack感兴趣,那么动手跟着本文中那个贯穿始终的例子写一次,写完以后你会发现你已明明白白的走进了Webpack的大门. //一个常见的Webpack配置文件 var webpack = require('webp

webpack基础配置

现今的很多网页其实可以看做是功能丰富的应用,它们拥有着复杂的JavaScript代码和一大堆依赖包.为了简化开发的复杂度,前端社区涌现出了很多好的实践方法 模块化,让我们可以把复杂的程序细化为小的文件; 类似于TypeScript这种在JavaScript基础上拓展的开发语言:使我们能够实现目前版本的JavaScript不能直接使用的特性,并且之后还能转换为JavaScript文件使浏览器可以识别: Scss,less等CSS预处理器 ... 这些改进确实大大的提高了我们的开发效率,但是利用它们

Vue2+webpack+node 配置+入门+详解

Vue2介绍 1.vue2.0 Vue (读音 /vju?/,类似于 view) 是一套用于构建用户界面的渐进式框架. Vue 的核心库只关注视图层 采用单文件组件 复杂大型单页应用程序(SPA) 响应式的数据绑定,与组件化的开发 HTML中的DOM与其他的部分独立开来划分出一个层次,这个层次就叫做视图层 2.Webpack Webpack是一个前端打包和构建工具. webpack有四个核心概念: 入口(entry)指示 webpack 应该使用哪个模块,来作为构建其内部依赖图的开始.可以单个入

在webpack中配置vue.js

在webpack中配置vue.js 这里有两种在webpack中配置vue.js的方法,如下: 1.在main.js中引入vue的包: index.html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,