您的位置：首页 > Web前端 > Webpack

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

2018-02-08 14:18 1006 查看

webpack安装

我们可以用npm安装webpack，要用npm我们就需要安装node.js环境，作为我们的平台。

下载node.js

下载好之后安装，我们在cmd或者GitBashHere中输入

npm -v
node -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-dev
npm install style-loader --save-dev

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

require("style-loader!css-lo
c4d0
ader!../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

若有错误的地方，望指出，转载请注明出处

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航