webpack 最简单的入门教程（基础的文件打包以及实现热加载）

来源：互联网发布：淘宝没收到货自动确认编辑：程序博客网时间：2024/06/14 07:56

webpack安装

我们可以用npm安装webpack，要用npm我们就需要安装node.js环境，作为我们的平台。
下载node.js
下载好之后安装，我们在cmd或者GitBashHere中输入

npm -vnode -v

这里写图片描述
如果出现版本号，说明你安装成功了！

现在我们全局安装webpack，这样你就不需要每创建一个项目就安装一次了

npm install webpack -g   //-g代表全局安装

运行结果大概如下
这里写图片描述

从一个项目开始用webpack

首先创建一个文件夹，我的文件夹是test01
在test01中输入下面的内容，你会发现文件夹中生成了一个package.json的文件，这是一个标准的npm说明文件，里面包含了丰富的信息，包括当前项目的依赖模块，自定义的脚本任务等等。

npm init

提示中按回车就好，如果你不准备在npm中发布你的模块。

接下来我们将webpack安装到我们的目录中,作为依赖

npm install webpack --save-dev

此时文件夹中多了node-modules和package-lock.json
这里写图片描述

尝试打包

我们在根目录下创建如下文件夹及文件

因为打包css文件需要安装依赖，所以我们先打包js文件作为尝试
在app.js中

module.exports = console.log("Hello Webpack!");

index.js中

require("./app.js");

index.html中

<body>    <h1>Hello</h1>    <script src="./src/bundle.js"></script></body>

在根目录下运行

webpack ./src/js/index.js ./src/bundle.js

这里写图片描述
此时在src文件夹下面生成了一个bundle文件
在浏览器中打开index.html文件，app.js中的内容被打包到bundle.js中了。

打包css文件

打包css文件需要安装依赖

npm install css-loader --save-devnpm install style-loader --save-dev

在index.css文件中添加样式，并在index.js中引入css文件

require("style-loader!css-loader!../css/index.css");

再打包一遍，此时样式被加载到文件中

打包多个文件

在entry中放入多个入口文件，output中的路径可以不变，filename复制下面的代码，会分别生成对应于入口文件的js文件

module.exports = {    // 多文件    entry: {        build: __dirname + "/src/js/index.js",  //生成build.js        list: __dirname + "/src/js/entry.js",   //生成list.js    },    output: {        path: __dirname + "/out",        filename: "[name].js"    },    module: {        loaders: [            { test:/\.css$/,loader:'style-loader'},            { test:/\.css$/,loader:'css-loader'}        ]    }}

简化打包

在根目录下创建一个叫webpack.config.js的文件,内容如下：

module.exports = {    entry: __dirname+ "/src/js/index.js",  //入口文件    output: {        path: __dirname + "/src",          //打包后文件的路径        filename: "bundle.js"              //打包后文件名称    }}

在命令行中只需要输入webpack即可实现打包，记住打包命令一定是在根目录下面，不要手误

webpack

热加载（使用webpack构建本地服务器）

我们每次改变文件中的内容，都需要重新打包，这样就加重了我们的任务量，有了热加载，我们就不需要打包，程序会自动打包，并且在浏览器上显示出来。

npm install webpack-dev-server -g    //安装npm install --save-dev webpack-dev-server  //添加到依赖

修改配置文件webpack.conf.js

module.exports = {    devtool: 'eval-source-map',    entry: __dirname + "/src/js/index.js",    output: {        path: __dirname + "/src",        // path: "/",        filename: "bundle.js"    },    devServer: {        historyApiFallback: true,   //如果设置为true，所有的跳转将指向index.html        inline: true        //设置为true，当源文件改变时会自动刷新页面    }}

devServer中还有其他可以配置的参数，后面的链接中有比较详细的介绍

package.json

{  "name": "test01",  "version": "1.0.0",  "description": "",  "main": "index.js",  "scripts": {    "test": "echo \"Error: no test specified\" && exit 1",    "server": "webpack-dev-server --open"   //加入这一行，json文件中不支持注释，需要删除  },  "author": "",  "license": "ISC",  "devDependencies": {    "css-loader": "^0.28.7",    "style-loader": "^0.19.1",    "webpack": "^3.10.0"  }}

此时热加载就配置好了，在命令行中输入

npm run server

浏览器窗口会自己打开，并且当你修改文件时，浏览器会自动加载，你可以修改css看看效果

参考地址：入门Webpack

若有错误的地方，网址出，转载请注明出处

阅读全文

0 0