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

webpack安装

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

npm -v
node -v

webpack 最简单的入门教程(基础的文件打包以及实现热加载)_第1张图片
如果出现版本号,说明你安装成功了!

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

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

运行结果大概如下
webpack 最简单的入门教程(基础的文件打包以及实现热加载)_第2张图片

从一个项目开始用webpack

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

npm init

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

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

npm install webpack --save-dev

此时文件夹中多了node-modules和package-lock.json
webpack 最简单的入门教程(基础的文件打包以及实现热加载)_第3张图片

尝试打包

我们在根目录下创建如下文件夹及文件
webpack 最简单的入门教程(基础的文件打包以及实现热加载)_第4张图片
因为打包css文件需要安装依赖,所以我们先打包js文件作为尝试
在app.js中

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

index.js中

require("./app.js");

index.html中

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

在根目录下运行

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

webpack 最简单的入门教程(基础的文件打包以及实现热加载)_第5张图片
此时在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-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

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

你可能感兴趣的