webpack安装和简单配置

时间:2021-01-13 13:36:58

1.webpack是一个基于node的项目,所以先装好node和npm

      参考我的随笔:https://www.cnblogs.com/jtnote/p/6230384.html

2.先创建项目目录结构,根目录是mywebpack。进入项目根目录,执行:npm init,生成package.json文件,内容就是一堆json数据,基本就是在终端里输入的信息。

3.进入项目根目录局部安装webpack,进入./mywebpack,执行:npm install webpack --save-dev,局部安装webpack成功了,根目录下会出现一个node_modules文件夹

4.如果你使用 webpack 4+ 版本,你还需要安装 CLI。

npm install --save-dev webpack-cli

5.在项目文件夹下新建webpack.config.js文件,比较简单的配置如下。

  • entry:表示入口文件,可以有多个入口文件。文件中包含所有逻辑代码,依赖的其他文件如css,js等。
  • output:将入口文件打包、编译输出的文件,是页面最终引入的文件。
webpack安装和简单配置
var path = require('path');
 var config= {
    entry: path.resolve(__dirname, 'index.js'),
    output: {
        path: path.resolve(__dirname, './dist'),
        filename: 'index.js',
    },
};

module.exports = config;

6.在项目跟目录创建index.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>my_program</title>
</head>
<body>
   <div id="app">
       helloworld
   </div>
<script type="text/javascript" src="./dist/index.js"></script>
</body>
</html>

7.在项目跟目录创建index.js文件作为入口文件

document.getElementById("app").innerHTML="hello webpack";

8.设置webpack-dev-server

  在开发时,每次更改文件后要运行npm run build 来重新编译、打包文件,无聊又麻烦。我们可以设置 webpack-dev-server来让他自动运行。webpack-dev-server 主要是启动了一个使用 express 的 Http服务器 ,它的作用主要是用来伺服资源文件 。此外这个 Http服务器 和 client 使用了 websocket 通讯协议,原始文件作出改动后, webpack-dev-server 会实时的编译,但是最后的编译的文件并没有输出到目标文件夹。在webpack.config.js配置文件中增加入口命令可以使文件变化时浏览器自动刷新。

  首先要安装它 npm install webpack-dev-server --save-dev。然后在package.json文件的scripts部分增加快捷指令:

1 "scripts": {    
2      "dev": "webpack-dev-server --host 127.0.0.1 --port 8080 --open  --config webpack.config.js"   
3  },

当你在命令行里运行 npm run dev 的时候他会执行 dev 属性里的值,即可启动webpack服务器监听。这些指令的意思:

  webpack-dev-server:在127.0.0.1:8080 建立一个 Web 服务器。

  --devtool eval: 为你的代码创建原地址。当有任何报错的时候可以让你更精确的定位到文件和行号。

  --progress: 显示编译的输出内容进度。

  --compress: 启用gzip压缩。

  --hot:热替换,开发过程中任何前端代码的更改都会实时的在浏览器中表现出来,不需要手动刷新。

  --colors:显示编译的输出内容颜色。

  --inline:webpack提供两种自动刷新模式 iframe/inline。默认iframe。

详细请参考 开发中 Server(DevServer) 

运行 npm run dev,浏览器打开视图显示: hello webpack