欢迎访问 生活随笔！
TAG聚合

生活随笔

当前位置： 首页 > 编程资源 > 编程问答 >内容正文

编程问答

WEBPACK 入门

发布时间：2025/4/16 编程问答 60 豆豆
生活随笔 收集整理的这篇文章主要介绍了 WEBPACK 入门 小编觉得挺不错的,现在分享给大家,帮大家做个参考.

webpack 入门

1. 什么是webpack

官网介绍：webpack是一个模块打包器。webpack 处理带有依赖关系的模块，生成一系列表示这些模块的静态资源。(webpack is a module bundler.webpack takes modules with dependencies and generates static assets representing those modules.)。

webpack会把各种资源(js,png,css,less,等等)都作为模块来使用和处理,最后转化成一系列的静态资源。

webpack都是怎么处理这些静态资源的呢？

webpack提供了一系列的模块加载器（loader）来编译这些模块。比如处理less文件，webpack提供了less-loader将less文件处理成css，然后再通过css-loader加载成css模块，最后由style-loader加载器对其做最后的处理,等等。当然，你还可以定制自己的加载器处理自己的特需需求。

2. 为什么使用webpack

  • 对于单页应用来说，随着项目的发展，在一个页面中的javascript代码会越来越多，引入的js库会越来越多，这时候就需要把javascript代码模块化，这样才能便于管理和后期的维护。对于一个新项目来说,推荐使用Commonjs规范来编写代码，但是webpack为了兼容以前的旧代码，又同时支持CMD和AMD规范。

  • 对于使用react开发项目的团队来说，webpack是必不可少的react开发神器。webpack中的react-hot-loader插件可以轻松实现react中模块组件的热替换，无刷新页面就可以实时查看页面所做的修改。有这样的功能，谁还会拒绝使用webpack呢？

3. 使用webpack

npm install webpack -g

安装成功后执行webpack -V 命令行会输出webpack的版本后和webpack全部的options（选项）。

我们在当前项目根目录下新建一个webpack.config.js文件，为webpack命令配置选项。当然你还可以通过命令行的方式来配置，但是那样太麻烦，每次执行都要敲一大堆命令，想想没人会这么干。

一个简单的webpack配置如下所示:

var webpack = require("webpack");var path = require("path");module.exports = {entry: './src/main.js', //入口文件,webpack会从入口文件出开始查找依赖递归进行打包output: {path: path.join(__dirname, 'www'),　　//打包后的文件位置filename: 'js/bundle.js',　　//打包后的文件名},module: {loaders: [　　//配置模块加载器,数组形式{ test: /\.(js|jsx)$/, loaders: ['babel?presets[]=react,presets[]=es2015'] },//babel加载器用于将es6转化成es5,使用前请先安装babel-loader再引入加载器],}};

在src下创建一个main.js作为入口文件：

在main.js写入以下内容:

document.write('study webpack!');

保存文件，在项目根目录下执行webpack命令后就会在www/js目录下生产打包后的bundle.js文件

然后我们在www目录下的index.html文件中直接用script标签引入这个生成的bundle.js就ok了。

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body> <!--引入生成的bundle.js--> <script type="text/javascript" src="./js/bundle.js"></script> </body> </html>

在浏览器中打开index.html。
可以看到页面出现了main.js中我们要打印的内容：

4. 安装webpack开发服务器(webpackd-dev-server)

webpack不仅提供了模块打包功能,还为开发者提供了一个开发服务器,这个开发服务器会监听文件中的每一个改动,文件改动会触发浏览器自动刷新页面,实时查看自己代码中的修改。执行下面命令作为依赖安装webpack-dev-server:

npm install webpack-dev-server --save-dev

在webpack.config.js同级目录下,新建一个server.js,配置webpack-dev-server参数。为了使热替换生效必须在以下三个位置配置信息：

  • 在server.js中设置hot:true参数

  • 在webpack.config.js的entry中加入'webpack/hot/dev-server

  • 在webpack.config.js的plugins中加入HotModuleReplacementPlugin

具体配置信息如下：

  • server.js配置:

    • var webpack = require('webpack'); var WebpackDevServer = require('webpack-dev-server'); var config = require('./webpack.config.js'); new WebpackDevServer(webpack(config), {publicPath: config.output.publicPath,hot: true,　　//开启热调试historyApiFallback: true }).listen(3000, '127.0.0.1', function (err, result) {if (err) {console.log(err);}console.log('server start'); });

  • webpack.config.js也要做修改:

    • var path = require('path'); var webpack = require('webpack');module.exports = (function( ) {var config = {entry: ['webpack-dev-server/client?http://127.0.0.1:8000','webpack/hot/dev-server','./src/main.js'],output: {path: path.join(__dirname, 'www'),filename: 'js/bundle.js',publicPath: '/www/'},module: {loaders: [],}};config.plugins = [new webpack.NoErrorsPlugin(), //允许错误不打断程序new webpack.HotModuleReplacementPlugin(),　　//webpack热替换插件];return config;})();

    修改main.js中的内容:

    document.write('study webpack by webpack-dev-server);

    修改过后执行如下命令:

    node server.js

    当在命令行看到

    webpack: bundle is now VALID.

    说明打包成功。我们刷新页面，可以发现页面发生了变化。

    并且控制台出现了两条语句

    HMR前缀的信息由webpack/hot/dev-server模块产生，WDS前缀的信息由webpack-dev-server客户端产生。（Messages prefixed with [HMR] originate from the webpack/hot/dev-server module. Messages prefixed with [WDS] originate from the webpack-dev-server client.）

    我们可以发现在www/js/目录下并没有产生bundle.js,因为通过webpack-dev-server打包出来的文件并没有实质性的生成存储在磁盘中,而是生成保存在内存中。每次执行node server.js 太繁琐,我们可以在package.json中为这条命令另起别名:

    这样我们每次只要执行npm start就可以启动webpack-dev-server了。

    原文作者来自MaxLeap 团队_cloud成员：zhiyingzzhou
    原文链接：https://blog.maxleap.cn/archives/727

    欢迎关注微信订阅号：从移动到云端
    欢迎加入我们的MaxLeap活动qq群：555973817，我们将不定期做技术分享活动。

    总结

    以上是生活随笔为你收集整理的WEBPACK 入门的全部内容，希望文章能够帮你解决所遇到的问题。

    如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。