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 ...
随机推荐
- BZOJ 3357: [Usaco2004]等差数列 动态规划
Code: #include<bits/stdc++.h> #define setIO(s) freopen(s".in","r",stdin) # ...
- 【bzoj3295】[Cqoi2011]动态逆序对
题目描述: 对于序列A,它的逆序对数定义为满足i<j,且Ai>Aj的数对(i,j)的个数.给1到n的一个排列,按照某种顺序依次删除m个元素,你的任务是在每次删除一个元素之前统计整个序列的逆 ...
- 二、angular7的基础知识学习
<p> hello works </p> <div *ngIf="isShow">我是测试内容</div> <p> &l ...
- 企业级技术解决方案：hbase+es
1:需求: 解决海量数据的存储,并且能够实现海量数据的秒级查询 Hbase是典型的nosql,是一种构建在HDFS之上的分布式.面向列的存储系统,在需要的时候可以进行实时的大规模数据集的读写操作:但是 ...
- iOS-7-Cookbook
https://github.com/liubin1777/iOS-7-Cookbook 版权声明:本文为博主原创文章,未经博主允许不得转载.
- OKHttp3 简介与使用
一.简介 Android系统提供了两种HTTP通信类:HttpURLConnection和HttpClient,前者对比后者十分难用. 网络请求进化:HttpURLConnection --- Apa ...
- 十、补充数据类型set
set:无顺序的不重复的集合 list---允许重复,修改tuple--允许重复,不能修改 set----不允许重复的集合例子: s=set()print s l1=[11,22,33,22,11]l ...
- 职位-CEO：CEO
ylbtech-职位-CEO:CEO 首席执行官(Chief Executive Officer,缩写CEO),职位名称,是在一个企业中负责日常事务的最高行政官员,主司企业行政事务,又称作司政.行政总 ...
- MongoDB学习【二】—MongoDB基础和数据类型
一.MongoDB基础知识 在MongoDB中相关术语的解释和sql术语对应关系 SQL术语/概念 MongoDB术语/概念 解释/说明 database database 数据库 table col ...
- 【GIS数据处理】 利用空间关系建立线CAD数据和属性表关联
这两天遇到一个不太容易解决的问题. 某燃气公司想自己对自建管线进行测绘便于数字化管理,在接受了简单的RTK测量培训和Cass成图培训后,就自己着手开干. 最近数据整理的差不多了,就提交给我请我帮忙核查 ...