webpack安装配置

时间：2021-10-28 15:43:22

webpack安装

1.安装之前你必须要安装node.js，如果你没安装可以在node.js网去下载node.js

2.全局安装webpack,打开cmd输入npm install webpack -g

3.cmd cd进入当前目录，输入npm init命令，一直按Enter,然后在当前文件夹会出现package.json文件

当前目录为webpackTest

webpack安装配置

webpack就安装成功了

webpack的配置

1.创建项目文件夹，文件夹的名字，不要叫“webpack”,并且不要包含大写字母，路径名不要包含中文

webpack安装配置

2.在当前目录下新建webpack.config.js配置文件，名字一定要是这个，不然会出错。因为这是webpack默认执行的文件

当前文件还有如下文件

webpack安装配置

out文件夹：存放出口文件

webpack安装配置

src文件夹

webpack安装配置

3.webpack.config.js配置文件的参数.

    • entry： 是 页面入口文件配置 （html文件引入唯一的js 文件）
    • output：对应输出项配置 
      • path ：入口文件最终要输出到哪里，
      • filename：输出文件的名称
      • publicPath：公共资源路径

4.在src文件夹下的js文件夹下创建入口文件，我创建的是名为entry的js文件，在项目的根目录下新建index.html文件来试调使用；

webpack.config.js

module.exports = {

    entry : './src/js/entry.js',//入口文件

    output : {//输出文件

        filename : 'index.js',//输出文件名

        path : __dirname + '/out'//输出文件路径

    },

}

entery.js

console.log('webpack');

index.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8" />

    <title>ss</title>

</head>

<body>

    <script src="./out/index.js"></script>

    <!-- 注意在这里引入的是打包完成的js文件 -->

</body>

</html>

cmd cd 进入当前项目的根目录，即webpackTest文件夹下；输入webpack或者webpack-w命令，查看html文件是否能console.log出"webpack"字符串

webpack和webpack-w的区别

webpack -w可以对项目打包并且实时监控, 当前配置文件下的文件如果发生更改时重新打包, 但如果webpack的配置文件即webpack.config.js更改时还是要通过webpack进行打包.(退出webpack -w 操作 ctrl+c)

相关文章