webpack前端技术小结

      2020-08-02 14:43      HTML5

为什么要用Webpack?

今天简单介绍一下Webpack,Webpack功能强大,简单易学!类似技术我博客中之前介绍过模块化的requirejs,及打包工具grunt。相比前面介绍过的那两种,WebPack是一种模块化的解决方案,利用WebPack可以找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其打包为合适的格式以供浏览器使用。下面我就对webpack做一个简单的小结。

安装

用 npm 安装 Webpack:

$ npm install webpack -g

此时 Webpack 已经安装到了全局环境下,可以通过命令行 webpack -h 试试。

在使用之前,我们也可以用

npm init

把package.json文件准备就绪。通常我们会将 Webpack 安装到项目的依赖中,这样就可以使用项目本地版本的 Webpack。可以Webpack 保存到package.json文件中去,这点安装其他插件都是一样的!

$ npm install webpack --save-dev入门级使用

首先创建一个静态页面 index.html 和一个 JS 入口文件 entry.js:

<!-- index.html --><html><head> <meta charset="utf-8"></head><body> <script src="bundle.js"></script></body></html>// entry.jsdocument.write('haorooms webpack demo works.')

运行如下命令就可以把entry.js编译成bundle.js,文件目录中多了一个bundle.js!

$ webpack entry.js bundle.js

当我们预览 index.html 的时候,就会看到haorooms webpack demo works. 是不是很简单,恭喜你,已经用webpack 制作了一个最简单的案例了!下面我们继续!

Loader

上面的案例是最基本的。假如我们有图片,有css,有多个模块的js,希望都进行编译打包,怎么办呢?假如我们使用了react 及jsx,那么如何使用webpack呢?

这里就需要使用 loader 进行转换。

安装Loader

npm install css-loader style-loader

下面我们新建一个style.css

/* style.css */body { background: yellow; }

然后我们新建一个module模块

// module.jsmodule.exports = 'It works from module.js.'

修改之前的 entry.js:

require("!style!css!./style.css") // 载入 style.cssdocument.write('haorooms webpack demo works.')document.write(require('./module.js'))

然后我们再运行

$ webpack entry.js bundle.js

刷新就可以看到黄色背景,及引入的模块module了!

假如我们entry.js如下写:

require("./style.css") // 载入 style.cssdocument.write('haorooms webpack demo works.')document.write(require('./module.js'))

那么我们运行命令如下,也可以达到相同的效果!

$ webpack entry.js bundle.js --module-bind 'css=style!css'

对图片处理类似,我们要安装url-loader

总之,一般安装规律如下:

$ npm install xxx-loader --saveor$ npm install xxx-loader --save-dev

假如我们有多个js,css,以及图片等等,按照上面的操作会很繁琐!接下来我们用到了webpack的配置文件!

配置文件

webpack默认情况下,会搜索当前目录的 webpack.config.js 文件,这个文件是一个 node.js 模块,返回一个 json 格式的配置信息对象,或者通过 --config 选项来指定配置文件。

我们在根目录下面创建一个配置文件:

webpack.config.js

记得,npm安装webpack到当前目录!然后修改 webpack.config.js

var webpack = require('webpack')module.exports = { entry: './entry.js', output: {path: __dirname,filename: 'bundle.js' }, module: {loaders: [{test: /\.css$/, loader: 'style!css'}] }}

这样,我们直接执行打包工具命令就可以了

webpack解析react 的es6语法及jsx文件

这需要我们安装babel-loader 模块!

npm install babel-loader babel-core babel-preset-es2015 webpack --save-dev

我们创建react入口文件

// main.jsxconst React = require('react');const ReactDOM = require('react-dom');ReactDOM.render( <h1>Hello, world!</h1>, document.querySelector('#wrapper'));

index.html如下:

<html> <body><div id="wrapper"></div><script src="bundle.js"></script> </body></html>

webpack.config.js如下:

module.exports = { entry: './main.jsx', output: {filename: 'bundle.js' }, module: {loaders:[{test: /\.js[x]?$/,exclude: /node_modules/,loader: 'babel-loader?presets[]=es2015&presets[]=react',},] }};插件

webpack还提供了很多插件,插件可以完成更多 loader 不能完成的功能。一般是在 webpack 的配置信息 plugins 选项中指定。Webpack 本身内置了一些常用的插件,还可以通过 npm 安装第三方插件。

下面我利用BannerPlugin ,一个最简单的插件,来给文件头部添加注释信息。

我们还是运用之前的webpack.config.js

var webpack = require('webpack')module.exports = { entry: './entry.js', output: {path: __dirname,filename: 'bundle.js' }, module: {loaders: [{test: /\.css$/, loader: 'style!css'}] }, plugins: [new webpack.BannerPlugin('This file is created by haorooms') ]}

然后运行 webpack,打开 bundle.js,可以看到文件头部出现了我们指定的注释信息:

/*! This file is created by haorooms*//******/ (function(modules) { // webpackBootstrap// 后面代码省略webpack-dev-server 开启服务

webpack还可以开启本地服务!

首先我们安装webpack-dev-server

# 安装$ npm install webpack-dev-server -g

然后运行如下命令:

webpack-dev-server

就可以通过127.0.0.1:8080 或者localhost:8080 访问我们刚刚新建的页面了!

假如我们想监听修改,我们可以通过如下命令:

# 运行$ webpack-dev-server --progress --colors --watch小结

看到这里,假如你是一步一步跟着我的博客来操作的,那么恭喜你,你的webpack已经入门了!关于webpack更加深入的知识,我后面用到了再总结!希望这个webpack前端技术小结对您有所帮助!