使用webpack
web/webpack
Webpack介绍
Copyright @ 后盾网 houdunwang.comcss
WebPack能够看作是模块打包机：它作的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（less，ES6等），并将其打包为合适的格式以供浏览器使用。html
Webpack的工做方式是：把你的项目当作一个总体，经过一个给定的主文件（如：index.js），Webpack将从这个文件开始找到你的项目的全部依赖文件，使用loaders处理它们，最后打包为一个浏览器可识别的JavaScript文件。node
安装命令
使用npm 或 cnpm 安装webpack及相关的软件包webpack
cnpm i --save-dev webpack html-webpack-plugin babel-cli babel-loader babel-core babel-preset-env style-loader css-loader less-loader less postcss-loader precss autoprefixer less sass-loader node-sass html-loader file-loader url-loader uglifyjs-webpack-plugin webpack-dev-server
打包实例
配置文件
webpack.config.js是webpack 使用的配置文件es6
module.exports = {
entry: {
//入口文件
main: './app.js'
},
output: {
//保存目录 __dirname指根目录
path: __dirname + '/dist',
//打包后的文件
filename: 'bundle.js',
}
}
注意这是一个基本的配置文件，后面咱们会加强这个文件web
目录结构
[image:7CCCF966-17D0-4A0B-B5B6-CBAC1FE6B3A7-1189-0000027EA2D13BC0/A205346F-3566-44A9-9FC8-6F8C085E5EF2.png]
正则表达式
建立index.html模板文件npm
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="dist/bundle.js"></script>
</head>
<body>
</body>
</html>
建立主入口文件app.js，他的做用就是来引入咱们的项目文件。json
require('./hd.js');
建立文件hd.js浏览器
document.write('后盾人 人人作后盾');
打包
若是webpack不是全局安装的，经过下面命令运行
./node_modules/webpack/bin/webpack.js
每次打这么多有点不方便，咱们能够将经常使用的执行脚本写到package.json文件中
"scripts": {
"start": "webpack --config webpack.config.js"
},
如今能够直接执行 npm run start 来执行webpack命令了
运行webpack
npm run start
执行成功后会建立打包文件 dist/bundle.js
处理器
处理器(loader)Loaders是webpack中最核心的功能了。loader经过调用外部的脚本或工具对各类格式的文件进行处理，好比说将ES6转换为现代浏览器能够识别的JS文件。
能够在一种文件上应用多个loader，好比咱们能够对.less文件使用 less-loader css-loader style-loader等等，在配置文件中最后写的最早应用。
Loaders须要单独安装而且须要在webpack.config.js中配置，Loaders的配置选项包括如下几方面：
test: 一个匹配loaders所处理的文件的扩展名的正则表达式(必须)
use: loader的名称(必须)
include/exclude: 必须处理的文件或文件夹与屏蔽不须要处理的文件或文件夹(可选)
options：为loaders提供额外的设置选项(可选)
Less文件处理
下面经过解析less 实例讲解loader的使用。
处理less须要安装三个处理器:style-loader css-loader less-loader autoprefixer，咱们在前面的安装章节已经安装了这三个loader。
配置
修改webpack.config.js配置文件
module.exports = {
entry: {
//入口文件
main: './app.js'
},
output: {
//保存目录 __dirname指根目录
path: __dirname + '/dist',
//打包后的文件
filename: 'bundle.js',
},
module: {
rules: [
{
test: /\.less$/,
use: [
//在html页面中建立style样式标签
"style-loader",
// 转换 CSS 到 CommonJS
"css-loader",
{
//为浏览器
loader: "postcss-loader",
options: {
//postcss-loader的插件
plugins: function () {
return [
//为不一样浏览器添加栏目前缀
require('autoprefixer')
];
}
}
},
"less-loader"
]
}
]
}
}
项目中新增less文件hd.less
body {
h1 {
background: #f00;
display: flex;
}
}
修改index.html添加标签用于测试效果
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="dist/bundle.js"></script>
</head>
<body>
<h1>后盾网</h1>
</body>
</html>
在app.js入口文件中引入less
require('./hd.less');
require('./hd.js');
执行打包命令后咱们在浏览器中就能够看到效果，并且生成的css文件也作了兼容性处理会为不一样浏览器加上样式前缀。
npm run start
如今咱们掌握了使用loader处理less文件，其余类型的文件也是同样的方式。能够经过查看webpack官网获取更多loader的使用。 https://webpack.js.org/loaders/
JS文件处理
咱们继续在webpack.config.js的module/rules配置段添加处理js的配置：
JS使用的loader咱们已经在前面的安装部分都安装过了
{
test: /\.js$/,
//不分析打包exclude指定的目录
exclude: /(node_modules|bower_components)/,
//只分析include指定的目录
include: /(src)/,
//将es6转为es5语法
loader: 'babel-loader',
options: {
presets: ['env']
}
}
也可咱们能够在js文件中码 ES6的代码了，执行 npm run start 后会转为ES5的代码适用于全部浏览器了。
options 配置是将ES6转为ES5的声明，也能够写在.babelrc文件中独立配置：
{
presets: ['env']
}
通过上面的配置咱们就能够在项目中使用 const let等ES6语法了。
图片处理
我在webpack.config.js的module/rules配置段添加处理图片loader的配置：
{
//打包图片
test: /\.(png|jpg|jpeg|gif|svg)$/,
use: [{
loader: 'url-loader'
, options: {
//图片小于50K时生成base64图片字符串
limit: 50000,
//生成文件名规则
name: 'dist/images/[sha512:hash:base64:7].[ext]'
}
}]
}
修改hd.less
body {
background: url("1.jpg");
h1 {
background: #f00;
display: flex;
}
}
执行打包命令 npm start 后系统会将大于50Kb的图片添加到 dist/images目录中，小图生成base64字符串。
插件（Plugins）
插件是用来拓展Webpack功能的，它们会在整个构建过程当中生效，执行相关的任务。Loaders和Plugins经常被弄混，可是他们实际上是彻底不一样的东西，loaders是在打包构建过程当中用来处理源文件的（JSX，Scss，Less..），一次处理一个，插件并不直接操做单个文件，它直接对整个构建过程其做用。
版权插件
下面咱们经过版权声明插件来演示插件的使用方法。
在配置文件的最开始调用webpack模块
const webpack = require('webpack');
添加配置项 plugins 与module同级
plugins: [
new webpack.BannerPlugin("copyright@houdunwang.com")
]
执行编译命令后咱们会在最终生成的编译文件头部看到版本声明内容。
模板编译
html-webpack-plugin这个插件的做用是根据模板生成最终的HTML5文件，这个文件中自动引用项目使用的JS/CSS等文件，系统会自动插件编译好的JS入口文件。
插件模块 html-webpack-plugin 已经在前面章节安装过了。
在配置文件最开始引入插件
const htmlWebpackPlugin = require('html-webpack-plugin');
在webpack.config.js 的plugins配置段添加：
new htmlWebpackPlugin({
//静态模板文件
template: './app.html',
//生成的文件名，不加路径时生成到output.path设置的目录中
filename: 'index.html',
//js文件插入到html中的位置
inject: 'body',
//html页面title标签值
title: '后盾人 - 这是标题部分',
//使用的入口文件
chunks: ['main'],
minify: {
//删除注释内容
removeComments: true,
//删除html中的空格、换行符
// collapseWhitespace: true,
}
})
建立模板文件app.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<h1>后盾人 houdunren.com</h1>
</body>
</html>
执行编译命令后系统会将 app.html作为模板生成新的项目文件 dist/index.html
JS压缩插件
uglifyjs-webpack-plugin用于对生成的JS文件进行压缩，在生产环境下压缩事后的文件显然会更节省咱们的带宽与提升响应速度。
插件模块 uglifyjs-webpack-plugin 已经在前面章节安装过了。
在配置文件最开始引入插件
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
在webpack.config.js 的plugins配置段添加：
new UglifyJSPlugin({
compress: {
warnings: false
},
mangle: {
except: ['$super', '$', 'exports', 'require']
}
})
执行 npm start 命令后咱们就生成了压缩的JS文件了。
自动刷新
上面的开发中咱们要执行如下几步才能够看到效果。
修改代码
npm start
手动刷新浏览器
如今咱们能够经过一个插件节省步骤，实现修改完代码后自动刷新浏览器看到效果，若是在开发中咱们有2台显示器体验会更好。
修改webpack.config.js配置文件，与output配置同级
devServer: {
contentBase: path.join(__dirname, "dist"),
compress: true,
port: 9000
}
修改package.json添加npm 执行脚本
"scripts": {
"start": "webpack --config webpack.config.js",
"dev": "webpack-dev-server"
}
执行npm run dev命令后，在浏览器访问 localhost:9000就可看到效果，如今咱们在修改代码后浏览器会自动刷新出结果。
附录
package.json
{
"name": "houdunren",
"version": "1.0.0",
"description": "",
"main": "webpack.config.js",
"scripts": {
"start": "webpack --config webpack.config.js",
"dev": "webpack-dev-server"
},
"author": "",
"license": "ISC",
"devDependencies": {
"autoprefixer": "^6.7.6",
"babel-cli": "^6.23.0",
"babel-core": "^6.23.1",
"babel-loader": "^6.4.0",
"babel-preset-env": "^1.2.1",
"css-loader": "^0.27.1",
"file-loader": "^0.10.1",
"html-loader": "^0.4.5",
"html-webpack-plugin": "^2.28.0",
"less": "^2.7.2",
"less-loader": "^3.0.0",
"node-sass": "^4.5.0",
"postcss-loader": "^1.3.3",
"precss": "^1.4.0",
"sass-loader": "^6.0.3",
"style-loader": "^0.13.2",
"uglifyjs-webpack-plugin": "^0.3.0",
"url-loader": "^0.5.8",
"webpack": "^2.2.1",
"webpack-dev-server": "^2.4.1"
}
}
webpack.config.js
const webpack = require('webpack');
const htmlWebpackPlugin = require('html-webpack-plugin');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
entry: {
//入口文件
main: './app.js'
},
output: {
//保存目录 __dirname指根目录
path: __dirname + '/dist',
//打包后的文件
filename: 'bundle.js',
},
devServer: {
contentBase: "dist",
compress: true,
port: 9000
},
module: {
rules: [
{
//打包图片
test: /\.(png|jpg|jpeg|gif|svg)$/,
use: [{
loader: 'url-loader'
, options: {
limit: 50000,
//生成文件名规则
name: 'dist/images/[sha512:hash:base64:7].[ext]'
}
}]
},
{
test: /\.less$/,
use: [
//在html页面中建立style样式标签
"style-loader",
// 转换 CSS 到 CommonJS
"css-loader",
{
//为浏览器
loader: "postcss-loader",
options: {
//postcss-loader的插件
plugins: function () {
return [
//为不一样浏览器添加栏目前缀
require('autoprefixer')
];
}
}
},
"less-loader"
]
},
{
test: /\.js$/,
//不分析打包exclude指定的目录
exclude: /(node_modules|bower_components)/,
//只分析include指定的目录
include: /(src)/,
//将es6转为es5语法
loader: 'babel-loader'
}
]
}
,
plugins: [
new webpack.BannerPlugin("后盾网出品"),
new htmlWebpackPlugin({
//静态模板文件
template: './index.html',
//生成的文件名，不加路径时会生成到 output.path 属性设置的目录中
filename: 'index.html',
//js文件插入到html中的位置
inject: 'body',
//html页面title标签值
title: '后盾人 - 这是标题部分',
//使用的入口文件
chunks: ['main'],
minify: {
//删除注释内容
removeComments: true,
//删除html中的空格、换行符
// collapseWhitespace: true,
}
}),
new UglifyJSPlugin({
compress: {
warnings: false
},
mangle: {
except: ['$super', '$', 'exports', 'require']
}
})
]
}
- 1. webpack copy-webpack-plugin 的使用
- 2. webpack使用webpack-dev-serve
- 3. 使用webpack和webpack-dev-server
- 4. webpack使用
- 5. Webpack的使用
- 6. React使用——webpack
- 7. webpack的使用
- 8. webpack 使用
- 9. Webpack 使用
- 10. webpack 使用 iconfont
- 更多相关文章...
- • TortoiseSVN 使用教程 - SVN 教程
- • Docker 容器使用 - Docker教程
- • Composer 安装与使用
- • 使用Rxjava计算圆周率
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. vs2019运行opencv图片显示代码时，窗口乱码
- 2. app自动化 - 元素定位不到？别慌，看完你就能解决
- 3. 在Win8下用cisco ××× Client连接时报Reason 422错误的解决方法
- 4. eclipse快速补全代码
- 5. Eclipse中Java/Html/Css/Jsp/JavaScript等代码的格式化
- 6. idea+spring boot +mabitys(wanglezapin)+mysql (1)
- 7. 勒索病毒发生变种 新文件名将带有“.UIWIX”后缀
- 8. 【原创】Python 源文件编码解读
- 9. iOS9企业部署分发问题深入了解与解决
- 10. 安装pytorch报错CondaHTTPError：******