webpack是现代流行的一款前端打包工具。一般来说,
一个真实的网页往往不使用纯js编写。比如大型网页,我们一般会选择Typescript, Less等产品化工具型语言,或者使用Angular, React 等前端框架。如果是这样写出来的网页往往不是能直接放到浏览器里执行的。
一般来说,我们会先用lessc命令将网页所有的less
文件编译成浏览器识别的css
文件。再用tsc命令将网页用到的ts
文件编译成浏览器识别的js
文件。一步步操作完成。
通常产品化的网页维护成本较大,一般我们将步骤合法化到批处理
文件或是其他方式,但这些都不适用于真正竞争力充足的商品。
webpack主要就是针对于这些需求
自动化完成网页打包的工具。
1.最基本的
功能 -- 识别
文件依赖,允许使用require等高级语法。
很多浏览器都还
不支持require export等语法。webpack原生就
支持这种写法,并且能够分析
文件依赖。
npm init
npm install webpack
编写测试
代码:
grapecity.js:
module.exports = function showCompapy(){
console.log('This is Grapecity! We have a new child company');
var gartner = require('./gartner.js');
gartner();
}
gartner.js:
module.exports = function showCompapy(){
console.log('This is Gartner New Guy!');
}
入口
文件 main.js:
var gc = require("./grapecity.js");
gc();
编写webpack配置,webpack配置就有点类似早期大型网页开发人员编写的批处理
文件。
module.exports = {
entry: __dirname + '/source/main.js',
output: {
path: __dirname + '/output',
filename: 'bundle.js'
},
devtool: "eval-source-map"
}
最基本的配置
包括:
入口
文件:从什么
文件开始分析依赖,并不断打包。
产物:一般是
一个js
文件。
调试工具:
生成map
文件,方便开发人员调试。
名称
|
特点
|
source-map
|
生成对应的产品源码和webpack源码
|
eval-source-map
cheap-module-eval-source-map
|
生成对应的产品源码
|
cheap-module-source-map
|
不生成源码
|
2.对框架的
支持。(非原生
支持)
npm install react react-dom --save
render.js
import React , { Component } from 'react'
export class Painter extends Component{
render(){
return (Painter Component);
}
}
main.js
import React from 'react';
import { render } from 'react-dom';
import { Painter } from './render.js';
window.onload = function () {
render( />, document.getElementById('container'));
};
直接运行,网页肯定会崩溃。但使用webpack也有
错误,因为对框架
支持并非是webpack原生
支持的
功能。
npm install --save-dev
babel-core babel-loader
babel-preset-env babel-preset-react
安装多个
插件
继续扩增webpack.con
fig.js
module: {
rules: [
{
test: /(\.js|\.jsx)$/,
use: {
loader: "babel-loader",
options: {
presets: ['env', 'react']
}
}
}
]
}
在rules
增加一项对js jsx
文件的处理,使用babel-loader进行处理
presets是Babel的
插件,通过
npm install babel-preset安装得到。
插件用来转换成es6语法等
注意设置include可以提高速度。
可以把路径也换成
绝对路径:
var path = require('path') ;
path.resolve(__dirname, 'src');
3.对CSS的
支持(非原生
支持)
还是得先安装下依赖
npm install --save-dev
style-loader
css-loader
继续扩增下rules,这次针对css
文件进行处理
{
test: /\.css$/,
use: [
{
loader: 'style-loader'
},
{
loader: '
css-loader'
}
]
}
post
css-loader 可以
增加不同浏览器对css某一
属性的
支持
4.typescript
支持(非原生能
支持)
先安装依赖
npm insatll typescript ts-loaer
typescipt可以编写他自己的con
fig
tscon
fig.json
{
"compilerOptions": {
"module": "commo
njs",
"target": "es5",
"sourceMap": true
}
}
再次给rules新增一项,这次主要处理ts
{
test: /\.ts$/,
use: {
loader: 'ts-loader'
}
},
添加测试的ts
文件
export class Student{
constructor(container:HTML
divelement){
if(!container){
return;
}
container.innerHTML = '
Welcome Typescript!
';
}
}
入口
文件引用
import { Student } from './test.ts';
window.onload = function () {
new Student(document.getElementById('container_02'));
};
5.原生
插件(原生
支持,无需安装额外包)
新增一句
var webpack = require('webpack');
新增项:
plugins: [
new webpack.BannerPlugin('版权所有,翻版必究')
]
这个从
插件可以给最终的js
文件开头新增一些话。
一些比较常用的需要安装的
插件
npm install html-webpack-plugin
使用
var htmlWebpack = require('html-webpack-plugin');
plugins: [
new webpack.BannerPlugin('版权所有,翻版必究'),
new htmlWebpack({
filename: 'index-version-[hash].html',
inject: 'head',
template:'./source/index.html'
})
],
hash是关键字,每次
生成的都不一样。
生成的html会放在output的path
属性里面
注意output的filename也可以带路径的,这样html和最终js产物就不冲突了。
template是模板,有了模板就可以只加js引用了。
6.补充
不一定非的要webpack.con
fig.js
修改配置名字只需要
修改package
webpack --con
fig aa.js
--progress
--
display-modules
--colors
--
display-reason
"start": "webpack --con
fig webpack.con
fig.js --
display-error-details"
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。