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 ...
随机推荐
- Maven的settings.xml配置详解
子节点详细介绍转载:http://www.cnblogs.com/jingmoxukong/p/6050172.html?utm_source=gold_browser_extension 全局配置 ...
- J - Mr.Panda and TubeMaster
题解 我们可以把每个格子拆成两个点,一个表示横向的,一个表示纵向的,相邻的格子横向和纵向连边. 如果直接按照题意做的话,我们应当在横向和纵向的点之间连边,有限制的边设下界为1,然后跑可行流. 或者考虑 ...
- HPU personal training
K - Two Contests 原题链接:https://agc040.contest.atcoder.jp/tasks/agc040_b?lang=en 题目大意: 给一个区间集合,将这些区间分为 ...
- SSM+PageHelper 使用
项目中使用了maven 1 引入jar包 首先需要引入PageHelper的jar包. 如果使用了maven,那么只要在pom.xml中引入该插件即可,引入如下: <dependency> ...
- JPA Hibernate 等面向对象持久化框架难以解决的问题
1+N查询性能问题 单个更新实体对象,而不是使用单调语句 在Java端做了很重的数据处理,数据库端反而很少 多层次 fetch inner join 难以实现 关联映射难以自定义条件 级联操作难以掌控 ...
- 【洛谷T2695 桶哥的问题——吃桶】
这是我们团队的一个题目(就是一个_rqy说很好写的题QwQ) 题目背景 @桶哥 这个题目的思路很玄学(性感_rqy在线讲解) 60 Pts 对于前面的六十分,好像很好拿,单纯的打一个模拟 唯一需要注意 ...
- R语言实现金融数据的时间序列分析及建模
R语言实现金融数据的时间序列分析及建模 一 移动平均 移动平均能消除数据中的季节变动和不规则变动.若序列中存在周期变动,则通常以周期为移动平均项数.移动平均法可以通过数据显示出数据长期趋势的变动 ...
- X509格式的证书校验（基于GMSSL2019-06-15版本）
实现X509格式证书的链式校验 // cert_public.cpp : Defines the exported functions for the DLL application. // #inc ...
- 自动化测试--利用opencv进行图像识别与定位
SIFT检测方法 SIFT算法就是把图像的特征检测出来,通过这些特征可以在众多的图片中找到相应的图片 import cv2 #读取图片,以1.png为例 img=cv2.imread('1.png') ...
- 【MM系列】SAP MM-模块物料主数据简介
公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[MM系列]SAP MM-模块物料主数据简介 ...