如何使用webpack

来源：互联网发布：win10加速优化编辑：程序博客网时间：2024/05/29 11:16

为什么要学习webpack？

1、webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载。通过 loader 的转换，任何形式的资源都可以视作模块.比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等

--------------------------------------------------引用来自webpack文档

2、vue-cli脚手架使用的webpack作为打包工具3、后面会学习使用vue-cli脚手架，所以必须熟悉webpack

安装webpack

方法1：npm install webpack -g //全局安装方法2：npm install webpack --save //安装到你的项目目录

关于npm安装速度慢，以及某些包被墙无法安装的问题，稍后会针对性写一篇文章

准备工作

1、在当前项目路径下使用npm init初始化项目。回车后会出现一些选项，例如：项目名称，版本，说明，git仓库等等。一律默认回车就好（假如你要提供到npm上，建议好好了解这些选项的意思）。完成后，根目录会出现一个package.json文件，这是一个说明文件，里面包含了刚才我们默认的选项，第三方依赖包，自定义的脚本等。

2、使用第二个方法安装webpack

npm install webpack --save //安装到你的项目目录

3、在根目录创建一个src文件夹,进入src文件夹创建main.js

var div2 = document.createElement('div');div2.textContent = "hello vuejs";document.getElementById('main').appendChild(div2);

再在根目录下创建一个index.html

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title></title></head><body>  <div id="main">  </div>  <script src="dist/bundle.js"></script></body></html>

开始使用webpack

在终端中使用webpack命令

语法：webpack 入口文件 输出文件本实例：webpack src/main.js dist/bundle.js

终端输出信息

此时项目根目录下多出一个dist文件夹，且包含一个bundle.js文件

如果你的webpack不是全局安装，则webpack src/main.js dist/bundle.js 要改成 node_modules/.bin/webpack src/main.js dist/bundle.js

到这里，我们就已经成功打包了一个文件，怎么样，是不是很简单？

但是，每次在终端输入这么多东西，好麻烦啊！这个时候就需要我们配置webpack.config.js文件了

webpack.config.js

在根目录创建webpack.config.js文件

module.exports = {  entry: __dirname + '/src/main.js',//入口文件  output: { //输出文件    path: __dirname + '/dist/', //文件打包后存放文件的目录    filename: 'bundle.js' //文件打包后存放的文件的文件名  }};

在终端执行命令 webpack ,输出内容

成功打包文件。当我们执行webpack命令时，它会到当前根目录下寻找webpack.config.js文件。

做过nodejs项目的朋友对于package.json下的scripts应该都不陌生，我们可以通过自定义一些脚本，以便更加方便的编译或运行项目。

为了让webpack使用起来更加方便，我们也可以这样做。

使用package.json中的脚本打包文件

在package.json里的scripts加入

"build": "webpack --progress"  //--progress 显示进度(json文件不允许添加注释，这里只为解释progress)

在终端执行

npm run build

哈哈，还是npm大法好啊！

但是，这里有个问题，如果我们修改了main.js 比如在里面加入

div2.setAttribute('style','color: red');

要想页面获取这个效果，我们需要重新打包一次，刷新页面后才能得到效果。这肯定不是我们想要的。

我们可以使用webpack-dev-server来解决问题

webpack-dev-server

webpack-dev-server 提供了一个服务器和实时重载（live reloading）功能。当我们在文件中做些更改并且保存。可以在控制台中看到正在编译。完成之后，页面会自动刷新

如何使用webpack-dev-server

1、安装webpack-dev-server

npm install webpack-dev-server -g //全局安装npm install webpack-dev-server --save-dev //安装到当前项目

2、在webpack.config.js文件中配置以下内容

devServer: {  contentBase: __dirname,//告诉服务器从哪里提供内容。只有在你想要提供静态文件时才需要  publicPath: '/dist/',//使此路径下的打包文件可以在浏览器中使用  inline: true, //使用内联模式，当内容改变实时重载时，脚本将被插入到你的包(bundle)中，并且构建消息将会出现在浏览器控制台  open: true //浏览器打开}

3、终端执行命令

webpack-dev-server

同样，如果你的webpack-dev-server不是安装在全局，请使用以下命令执行

node_modules/.bin/webpack-dev-server

终端显示

消息中有一句:project is running at http://localhost:8081/ 表示项目运行在8081端口

访问页面，在浏览器地址栏输入 http://localhost:8081或http://127.0.0.1:8081访问页面

成功访问。

这时候我们再修改main.js,在里面随便加入任何不会报错的语句

例如：

console.log("不用每次都重新打包文件啦")

保存文件后发现终端正在编译，完成后切换到已经打开的页面，控制台成功打印“不用每次都重新打包文件啦”

注：网上有小伙伴说直接在webpack.config.js中配置webpack-dev-server有时并不能实现自动刷新（博主是没有遇到过）。

解决方法：可以在package.json中添加一个脚本来运行

"dev": "webpack-dev-server --open --inline"

执行npm run dev自动打开页面。

同样随便修改内容。页面自动同步

-------------------------------------------------------------------------------------------------------

本章讲解了如何正确安装webpack、如何打包文件以及使用webpack-dev-server实现页面自动重载

下一章将讲解webpack最出色的loaders。敬请关注，谢谢！

阅读全文

0 0