ES2015(es6)
手动配置webpack
发布时间：2019-08-20 发布网站：脚本宝典
脚本宝典收集整理的这篇文章主要介绍了手动配置webpack，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。现在框架对于webpack都进行了
集成，但是作为开发的我们，应该手动配置webpack，以此对其打包编译原理有更详细的认识。
最简单的webpack配置
webpack四个核心概念：
- 入口(entry)
入口起点(entry point)指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。进入入口起点后，
webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。
- 输出(output)
output 属性告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件，默认值为 ./dist。基本
上，整个应用程序结构，都会被编译到你指定的输出路径的文件夹中。你可以通过在配置中指定一个 output 字
段，来配置这些处理过程：
- loader
loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 可以
将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行
处理。
- 插件(plugins)
loader 被用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。插件的范围包括，从打包优化和压
缩，一直到重新定义环境中的变量。插件接口功能极其强大，可以用来处理各种各样的任务。
想要使用一个插件，你只需要 require() 它，然后把它添加到 plugins 数组中。多数插件可以通过选项
(option)自定义。你也可以在一个配置文件中因为不同目的而多次使用同一个插件，这时需要通过使用 new 操作
符来创建它的一个实例。
webpack.config.js
const path = require('path');
module.exports = {
entry: './path/to/my/entry/file.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'my-First-webpack.bundle.js'
}
};HtMLWebpackPlugin
HtmlWebpackPlugin简化了HTML文件的创建，以便为你的webpack包提供服务。这对于在文件名中包含每次会随着
编译而发生变化哈希的 webpack bundle 尤其有用。
安装
npm install html-webpack-plugin@2.30.1 --save-dev
yarn add html-webpack-plugin@2.30.1 --dev基本用法
VAR HtmlWebpackPlugin = require('html-webpack-plugin');
var path = require('path');
module.exports = {
entry: 'index.js',
output: {
path: path.resolve(__dirname, './dist'),
filename: 'index_bundle.js'
},
plugins: [new HtmlWebpackPlugin()]
};会生成一个包含以下内容的文件 dist/index.html：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>webpack App</title>
</head>
<body>
<script src="index_bundle.js"></script>
</body>
</html>babel-loader
安装
npm install babel-loader babel-core babel-PReset-env --save-dev
yarn add babel-loader@7.1.2 babel-core@6.26.0 babel-preset-env@1.6.1 --dev基本使用
module: {
rules: [
{
test: /.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]
}babel-preset-react
安装
yarn add babel-preset-react@6.24.1 --dev基本使用
module: {
rules: [
{
test: /.js$/,
exclude: /(node_modules)/,
use: {
loader: 'babel-loader',
options: {
presets: ['env','react']
}
}
}
]
},style-loader css-loader
为了从 JavaScript 模块中 import 一个 CSS 文件，需要在 module 配置中 安装并添加 style-loader和
css-loader。
安装
npm install --save-dev style-loader css-loader
yarn add style-loader@0.19.1 css-loader@0.28.8 --dev基本使用
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
+ module: {
+ rules: [
+ {
+ test: /.css$/,
+ use: [
+ 'style-loader',
+ 'css-loader'
+ ]
+ }
+ ]
+ }
};ExtractTextWebpackPlugin
它会将所有的入口 chunk(entry chunks)中引用的 *.css，移动到独立分离的 CSS 文件。因此，你的样式将不
再内嵌到 JS bundle 中，而是会放到一个单独的 CSS 文件（即 styles.css）当中。 如果你的样式文件大小较
大，这会做更快提前加载，因为 CSS bundle 会跟 JS bundle 并行加载。
安装
npm install --save-dev extract-text-webpack-plugin@1.0.1
yarn add extract-text-webpack-plugin@3.0.2 --dev基本使用
const ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
module: {
rules: [
{
test: /.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
}
]
},
plugins: [
new ExtractTextPlugin("styles.css"),
]
}sass-loader
node-sass 和 webpack 是 sass-loader 的 peerDependency，因此能够精确控制它们的版本。
安装
npm install sass-loader node-sass webpack --save-dev基本使用
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
module: {
rules: [
{
test: /.scss$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
//如果需要，可以在 sass-loader 之前将 resolve-url-loader 链接进来
use: ['css-loader', 'sass-loader']
})
}
]
},
plugins: [
new ExtractTextPlugin('style.css')
//如果想要传入选项，你可以这样做：
//new ExtractTextPlugin({
// filename: 'style.css'
//})
]
}font-awesome
Font Awesome 字体提供了可缩放矢量图标,它可以被定制大小、颜色、阴影以及任何可以用CSS的样式。webpack中配置字体图标前需要提前引入font-awesome库，安装也很简单:
yarn add font-awesomeurl-loader
处理图片、字体图标，url-loader 功能类似于 file-loader，但是在文件大小（单位 byte）低于指定的限制时，可以返回一个 DataURL。
安装
yarn add file-loader@1.1.6 url-loader@0.6.2 --dev基本使用
module.exports = {
module: {
rules: [
// 图片的处理
{
test: /.(png|jpg|gif)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 8192
}
}
]
},
// 字体图标的处理
{
test: /.(woff|woff2|eot|ttf|otf|svg)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 8192
}
}
]
}
]
}
}CommonsChunkPlugin
CommonsChunkPlugin 插件，是一个可选的用于建立一个独立文件(又称作 chunk)的功能，这个文件包括多个入口 chunk 的公共模块。
通过将公共模块拆出来，最终合成的文件能够在最开始的时候加载一次，便存到缓存中供后续使用。这个带来页面速度上的提升，因为浏览器会迅速将公共的代码从缓存中取出来，而不是每次访问一个新页面时，再去加载一个更大的文件。
new webpack.optimize.CommonsChunkPlugin(options);
// 提出公共模块
new webpack.optimize.CommonsChunkPlugin({
// (公共 chunk(commnon chunk) 的名称)
name: 'common',
// (公共chunk 的文件名)
filename: 'js/base.js'
})webpack-dev-server
webpack-dev-server 为你提供了一个简单的 web 服务器，并且能够实时重新加载(live reloading)。
安装
yarn add webpack-dev-server@2.9.7 --dev基本使用
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
entry: {
app: './src/index.js',
print: './src/print.js'
},
devtool: 'inline-source-map',
devServer: {
// contentBase: './dist',
// 修改端口号
port: 8086
},
plugins: [
new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({
title: 'Development'
})
],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
}
};const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
entry: './src/app.jsx',
output: {
path: path.resolve(__dirname, 'dist'),
publicPath: '/dist/',
filename: 'js/app.js'
},
module: {
rules: [
// react(jsx)处理
{
test: /.jsx$/,
exclude: /(node_modules)/,
use: {
loader: 'babel-loader',
options: {
presets: ['env', 'react']
}
}
},
// css处理
{
test: /.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
},
// scss处理
{
test: /.scss$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['css-loader', 'sass-loader']
})
},
// 图片的处理
{
test: /.(png|jpg|gif)$/,
use: [{
loader: 'url-loader',
options: {
limit: 8192,
name: 'resource/[name].[ext]'
}
}]
},
//字体图标的处理
{
test: /.(woff|woff2|eot|ttf|otf|svg)$/,
use: [{
loader: 'url-loader',
options: {
limit: 8192,
name: 'resource/[name].[ext]'
}
}]
}
]
},
plugins: [
// 处理html文件
new HtmlWebpackPlugin({
template: './src/index.html'
}),
// 独立css文件
new ExtractTextPlugin("css/[name].css"),
// 提出公共模块
new webpack.optimize.COMmonsChunkPlugin({
name: 'common',
filename: 'js/base.js'
})
],
devServer: {
// contentBase: './dist'
port: 8086
},
};package.json
{
"name": "react-e-commerce-manage",
"version": "1.0.0",
"main": "index.js",
"repository": "",
"author": "",
"license": "MIT",
"scripts": {
"dev": "node_modules/.bin/webpack-dev-server",
"build": " node_modules/.bin/webpack"
},
"devDependencies": {
"babel-core": "6.26.0",
"babel-loader": "7.1.2",
"babel-preset-env": "1.6.1",
"babel-preset-react": "6.24.1",
"css-loader": "0.28.8",
"extract-text-webpack-plugin": "3.0.2",
"file-loader": "1.1.6",
"html-webpack-plugin": "2.30.1",
"node-sass": "^4.9.3",
"sass-loader": "6.0.6",
"style-loader": "0.19.1",
"url-loader": "0.6.2",
"webpack": "3.10.0",
"webpack-dev-server": "2.9.7"
},
"dependencies": {
"font-awesome": "^4.7.0",
"react": "16.2.0",
"react-dom": "16.2.0"
}
}
脚本宝典总结
以上是脚本宝典为你收集整理的手动配置webpack全部内容，希望文章能够帮你解决手动配置webpack所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
猜你在找的ES2015(es6)相关文章
- vuex 基本入门和使用（二） 2019-08-19
- 默认参数如何在JavaScript ES6中工作 2018-11-14
- JavaScript ES6功能：好的部件 2018-11-14
- 如何使用ES6箭头函数使您的JavaScript更易于阅读 2018-11-14
- 如何使用ES6在JavaScript中有条件地构建对象 2018-11-14
- 关于如何使用Fetch API执行HTTP请求的实用ES6指南示例代码 2018-11-14
- 5个在ES6中修复的JavaScript“坏”的部分 2018-11-13
- 分享干货ECMAScript 2015（ES6）提示和技巧非常有用 2018-11-13
- JavaScript ES6 - 写得少，做得更多 write less, do more 2018-11-13
- 什么时候（和为什么）你应该使用ES6箭头功能 - 何时不应该使用ES6箭头功能 2018-11-12
全站导航更多
html5HTML/XhtmlCSSXML/XSLTDreamweaver教程Frontpage教程心得技巧JavaScriptASP.NETPHP编程正则表达式AJAX相关ASP编程JSP编程编程10000问CSS/HTMLFlexvbsDOS/BAThtahtcpythonperl游戏相关VBA远程脚本ColdFusionMsSqlMysqlmariadboracleDB2mssql2008mssql2005SQLitePostgreSQLMongoDB星外虚拟主机华众虚拟主机Linuxwin服务器FTP服务器DNS服务器Tomcatnginxzabbix云和虚拟化bios系统安装系统系统进程Windows系列LINUXRedHat/CentosUbuntu/DebianFedoraSolaris红旗Linux建站经验微信营销网站优化网站策划网络赚钱网络创业站长故事alexa域名photoshop教程摄影教程Fireworks教程CorelDraw教程Illustrator教程Painter教程Freehand教程IndesignSketch笔记本主板内存CPU存储显卡显示器光存储鼠标键盘平板电脑安全教程杀毒防毒安全设置病毒查杀脚本攻防入侵防御工具使用业界动态Exploit漏洞分析
最新ES2015(es6)教程