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 ...
随机推荐
- Web防止button按钮点击多次
BtnPass.Attributes.Add("onclick", "javascript:if(document.getElementById('IsSubmited' ...
- Redis 序列化方式StringRedisSerializer、FastJsonRedisSerializer和KryoRedisSerializer
当我们的数据存储到Redis的时候,我们的键(key)和值(value)都是通过Spring提供的Serializer序列化到数据库的.RedisTemplate默认使用的是JdkSerializat ...
- Spring Cloud Commons教程（一）普通抽象
诸如服务发现,负载平衡和断路器之类的模式适用于所有Spring Cloud客户端可以独立于实现(例如通过Eureka或Consul发现)的消耗的共同抽象层. @EnableDiscoveryClien ...
- HDU 6438 Buy and Resell
高卖低买,可以交易多次 维护一个优先队列,贪心 相当于每天卖出 用当前元素减优先队列最小得到收益 用0/卖出,1/买入标志是否真实进行了交易,记录次数 #include<bits/stdc++. ...
- [CSP-S模拟测试]:big（Trie树+贪心）
题目描述 你需要在$[0,2^n)$中选一个整数$x$,接着把$x$依次异或$m$个整数$a_1~a_m$.在你选出$x$后,你的对手需要选择恰好一个时刻(刚选完数时.异或一些数后或是最后),将$x$ ...
- linux 挂载磁盘指令
fdisk -l (先df -h,如果没有xvdb盘信息,则敲这条指令) fdisk /dev/xvdb (进入对话状态,一问一答,结束后要保存w或者删除q) mkfs.ext3 /dev/xv ...
- 解决RHEL6 vncserver 启动 could not open default font 'fixed'错误.
https://blog.csdn.net/silencegll/article/details/51320629
- 老外写的-用Rawrite神器写入u盘镜像-制作u盘启动- fedora -u盘安装制作
用Rawrite神器写入u盘镜像? ====================================================== 尝试用ultraiso, 写入硬盘镜像, 不能启动,在 ...
- CTEX WinEdt 改变默认 pdf viewer
CTEX 2.9.2, WinEdt 7.0 "Options" -> "Excution Modes..." -> "PDF viewe ...
- VUE 全局监听sessionStorage变化
在做项目的时候,可能需要在其他模块获取推送的信息或者变量,但是数据量或者说数目少,而且项目中也没有引用VUEX,那么可以下手的方法之一也就是sessionStorage类的浏览器存储了. 首先在全局的 ...