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 1733: [Usaco2005 feb]Secret Milking Machine 神秘的挤奶机 网络流 + 二分答案
Description Farmer John is constructing a new milking machine and wishes to keep it secret as long a ...
- POJ 2391 Ombrophobic Bovines ( 经典最大流 && Floyd && 二分 && 拆点建图)
题意 : 给出一些牛棚,每个牛棚都原本都有一些牛但是每个牛棚可以容纳的牛都是有限的,现在给出一些路与路的花费和牛棚拥有的牛和可以容纳牛的数量,要求最短能在多少时间内使得每头牛都有安身的牛棚.( 这里注 ...
- luogu P1037 产生数 x
P1037 产生数 题目描述 给出一个整数 n(n<10^30) 和 k 个变换规则(k<=15). 规则: 一位数可变换成另一个一位数: 规则的右部不能为零. 例如:n=234.有规则( ...
- 20180827(02)- Java发送邮件
Java 发送邮件 使用Java应用程序发送E-mail十分简单,但是首先你应该在你的机器上安装JavaMail API 和Java Activation Framework (JAF) . 你可以在 ...
- USACO2018 DEC(Platinum) (树上乱搞，期望+凸包)
发现这跟\(Gold\)难度简直天差地别啊.. \(T1\) 传送门 解题思路 这道题还是很可做的,发现题意可以传化成一棵树每次从叶子节点删边,然后有\(m\)条限制,形如\(a\)在\(b\)前面删 ...
- [转]Vue项目全局配置微信分享思路详解
这篇文章给大家介绍了vue项目全局配置微信分享思路讲解,使用vue作为框架,使用vux作为ui组件库,具体内容详情大家跟随脚本之家小编一起学习吧 这个项目为移动端项目,主要用于接入公众号服务.项目采用 ...
- js方法返回多值如何取值demo
js方法返回,如何取值?下面demo两种方法 new array 和 json 返回值 取值示例. 方法一: new array <html> <head> <meta ...
- What does the dot after dollar sign mean in jQuery when declaring variables?
https://stackoverflow.com/questions/22156664/what-does-the-dot-after-dollar-sign-mean-in-jquery-when ...
- Phaser 源码分析
Phaser 一个可重用的同步屏障,功能上与 CyclicBarrier 和 CountDownLatch 类似,但是支持更灵活的使用. 把多个线程协作执行的任务划分为多个阶段,编程时需要明确各个阶段 ...
- 应用安全 - 工具使用 - Nmap
TCP端口扫描类型 TCP connect扫描 三次握手完成/全连接/速度慢/易被检测到 TCP SYN扫描 半开扫描/发送SYN包启动TCP会话 TCP FIN扫描 半开扫描/发送SYN包启动TCP ...