webpack的一般性配置及说明
1.webpack的常规配置
先给出一个示例：
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
entry: {
core: ["react", "react-dom", "redux", "react-router","react-redux"],
main: './src/index.js'
},
devServer: {
contentBase: './dist',
port: 9000
},
plugins: [
new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({
title: 'Development',
template: 'index.html'
})
],
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules)/,
use: {
loader: 'babel-loader',
}
},
{
test: /\.css$/,
use: ['style-loader','css-loader']
},
{
test: /\.less$/,
use: ['style-loader','css-loader',"less-loader"]
},
]
}
};
以上是一个非常简单的配置文档，主要做了以下几件事：
1.配合React框架将react依赖和入口文件分开打包成两个js文件，并命名为main和core，打包后输出。
// entry定义了webpack该从哪里开始编译，即入口。output定义了输出规则和目标文件夹。webpack允许多个入口和多个输出。
entry: {
core: ["react", "react-dom", "redux", "react-router","react-redux"],
main: './src/index.js'
},
output: {
//这里生成文件名分别为core.js,main.js
filename: '[name].js',
path: path.resolve(__dirname, 'dist')
},
2.配置了一个开发代理服务器，监听本地端口9000。
devServer: {
devtool: 'source-map',
//定义测试服务器的根目录位置
contentBase: './dist',
//监听端口
port: 9000,
//404时自动跳转到的文件
historyAPIFallback: {
index: 'index.html'
}
https: true,
compress: true,
allowedHosts: ['xxx.com', 'xx.com']
}
关于devtool的配置项参考以下链接：https://webpack.js.org/configuration/devtool/#devtool
3.设置了清除缓存插件，以及生成入口文件index.html。
plugins: [
//该插件会再重新编译的时候自动删除dist文件夹里面的缓存文件
new CleanWebpackPlugin(['dist']),
//该插件可以在编译完成后自动生成一个index.html文件，并将生成的js文件插入为脚本，作为网站的入口。
new HtmlWebpackPlugin({
title: 'Development',
//此处定义index文件的模版，如果没有模版webpack就会自己生成。若有模版，则会在模版文件尾部插入生成的脚本。
template: 'index.html'
})
]
index.html模版文件内容参考：
<!DOCTYPE html>
<html>
<head>
<title>Write App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
打包编译完成后的index.html文件如下：
<!DOCTYPE html>
<html>
<head>
<title>Write App</title>
</head>
<body>
<!--渲染React组件需要root的div-->
<div id="root"></div>
<script type="text/javascript" src="core.js"></script>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
4.为不同格式的文件设置不同的加载器，使用babel编译js，less编译样式文件。
module: {
rules: [
{
test: /\.js$/,
//需要排除掉node_modules文件夹里面的文件
exclude: /(node_modules)/,
//此处定义babel处理器，另外需要配置.babelrc配置文件，参见babel官网说明
use: {
loader: 'babel-loader',
}
},
{
test: /\.css$/,
use: ['style-loader','css-loader']
},
{
test: /\.less$/,
//如果使用了第三方样式框架，less文件需要编译，则需要使用less-loader
use: ['style-loader','css-loader',"less-loader"]
},
]
}
webpack的一般性配置及说明的更多相关文章
- webpack + vuejs 基本配置（一）
开始之前 本文包含以下技术,文中尽量给与详细的描述,并且附上参考链接,读者可以深入学习: 1.webpack2.Vue.js3.npm4.nodejs —- 这个就不给连接了,因为上面的连接都是在你实 ...
- webpack react基础配置一
简单介绍webpack react基本配置,入门型: 环境配置: 依赖nodejs,官网下载最新版的nodejs:nodejs.org/en 安装完nodejs npm便自动集成了,通过npm安装其 ...
- webpack 多entry 配置
// webpack 多entry 配置var path = require('path'); module.exports = { entry: { entry2: './entry.js', de ...
- react+webpack开发环境配置
react是目前非常热门的前端框架,提倡组件化开发.所谓的组件,简单理解,就是一个独立的页面部件(包括页面模版,样式,逻辑等),它是一个独立的整体. webpack,是一个模块打包工具,其主要功能,就 ...
- webpack的简单配置
本人刚开始也不会写webpack配置,刚开始在网上搜索了了一些,看的也是刚刚理解,所以准备自己写下来,已作纪念和贡献给像我一样不会配置的“童鞋”们! 1.创建webpack配置文件 在项目文件下创建一 ...
- Webpack 2 视频教程 019 - Webpack 2 中配置多页面编译
原文发表于我的技术博客 这是我免费发布的高质量超清「Webpack 2 视频教程」. Webpack 作为目前前端开发必备的框架,Webpack 发布了 2.0 版本,此视频就是基于 2.0 的版本讲 ...
- Webpack的基本配置
一.优化项目结构,创建相关的文件,项目结构如下:src文件夹存放相关js文件,index.html项目的首页面,dist文件夹是webpack 打包 目录. index.js内容为: alert('我 ...
- webpack 4+ vue-loader 配置 (完善中...)
webpack 4+ vue-loader 配置 写的demo,clone下来后,npm run dev即可,(此demo并未加入router) 可能会由于版本问题,配置会有些许改动,暂时都是可用的 ...
- [转] vue&webpack多页面配置
前言 最近由于项目需求,选择使用vue框架,webpack打包直接使用的vue-cli,因为需要多页面而vue-cli只有单页面,所以就决定修改vue-cli的配置文件来满足开发需求. html-we ...
随机推荐
- webpack配置反向代理
devServer: { contentBase: path.resolve(__dirname, "../dev"), compress: true, port: ,//本身的端 ...
- 不同地区Android开发者使用哪些设备测试APP？
我们的团队密切关注着移动世界的趋势,以便可以提供所有有关变化的最紧密和最重要的信息.春天恰好是对app进行新一轮测试并检查其与不同Android设备兼容性如何的最佳时机.下面让我们一起来看看全世界范围 ...
- es之关于consistency（数据一致性问题）
Es集群内部是有一个约定是用来约束我们的写操作的,就是“一致性”: 也就是说:新建.索引.删除这些操作都是写操作,他们都有一个大前提: 当前的分片副本处于活跃状态的数量 >= int( (pri ...
- 原生JS获取元素宽高实践详解
开篇的话 任何不是亲身实践中求得的知识,都不是属于你的.任何求得的知识不去时常温习运用,也不是属于你的. 记录由来 在做个上拉广告功能中遇到了一个"理所当然"觉得对的用法,慢慢才排 ...
- qbzt day4 下午
有向图的强连通分量 强联通:两个点之间可以互相到达 如果某个图任意两个点都是强联通的,那么称这个图强联通 如果一个图的子图是强联通的,那么称这个图是强联通子图 一个图的极大强联通子图被称作强连通分量 ...
- python生成requirements.txt 导出项目依赖
使用pip freeze $ pip freeze > requirements.txt 这种方式是把整个环境中的包都列出来了,如果是虚拟环境可以使用. 通常情况下我们只需要导出当前项目的req ...
- SVN 客户端不显示图标解决方案
下图为没有设置之前,文件夹不显示svn图标 SVN客户端不显示图标解决方案:右键svn->设置->图标覆盖->状态缓存选择"Windows外壳"->确定,刷 ...
- 阶段1 语言基础+高级_1-3-Java语言高级_08-JDK8新特性_第4节 方法引用_7方法引用_数组的构造器引用
先创建函数式接口 创建测试类 打印长度是10...... 方法引用优化
- drop_duplicates()函数
1dataframe删除某一列的重复元素,默认只留下第一次出现的 inplace参数设置为true时直接在原数据上修改,为False时,生成副本. 注意所有函数中inplace一旦设置为True,此时 ...
- IDEA常用快揵键
IDEA常用快揵键 工作中常用IDEA快捷键 参见博客:https://www.cnblogs.com/zhangpengshou/p/5366413.html Double shift --- ...