webpack入门启动webpack工程

墨蓝 2023-10-18 09:39 140阅读 0赞

### 前提： ###

安装完webpack以及webpack-dev-server

参照：

[https://blog.csdn.net/BADAO\_LIUMANG\_QIZHI/article/details/83011108][https_blog.csdn.net_BADAO_LIUMANG_QIZHI_article_details_83011108]

### 添加代码： ###

1.首先在目录demo下创建一个js文件：webpack.config.js

并初始化它的内容：

var config = {
    
    
    };
    
    module.exports = config;

2.然后在package.json中添加一个快速启动webpack-dev-server服务的脚本：

"scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "dev": "webpack-dev-server --open --config webpack.config.js"
      },

当运行:npm run dev 时，就会执行webpack-dev-server --open --config webpack.config.js 命令

\--config是指向webpack-dev-server读取的配置文件路径，这里直接读取我们上面建的webpack.config.js文件.

\--open会在执行命令时自动在浏览器打开页面，默认是127.0.0.1:8080，但是IP已经端口都是可以配置的。

"scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "dev": "webpack-dev-server  --host 172.172.172.1 --post 8888 --open --config webpack.config.js"
      },

3.webpack配置中最重要的也是必选的两个是入口（Entry）和出口（Output）,

入口的作用是告诉webpack从哪里开始寻找依赖，并且编译，

出口则是用来配置编译后的文件存储位置和文件名。

在demo目录下新建一个空的main.js作为入口的文件，然后在webpack.config.js中进行入口和输出的配置:

entry中的main就是我们配置的单入口，webpack会从main.js文件开始工作。

output中path选项用来存放打包后的文件的输出目录，是必填项。

publicPath指定资源文件引用的路径，如果你的资源存放在CDN上，这里可以填CDN的网址。

filename用于指定输出文件的名称。

这里配置的output意思为：打包后的文件会存储为demo/dist/main.js文件，只要在html中引入它就可以了。

4.在demo目录下，新建一个index.html作为我们的入口：

<!DOCTYPE HTML>
    <html>
     <head>
      <title> hello webpack </title>
      <meta charset="utf-8">
     </head>
    
     <body>
         <div id="app">
      Hello Webpack!!!!!!
      </div>
      <script type="text/javascript" src="/dist/main.js"></script>
     </body>
    </html>

### 启动webpack工程 ###

在此处打开命令行，输入：

npm run dev

![Image 1][]![70][]

就会在浏览器中打开页面了：

![Image 1][]![70 1][]

示例代码下载：

[https://download.csdn.net/download/badao\_liumang\_qizhi/10713691][https_download.csdn.net_download_badao_liumang_qizhi_10713691]

[https_blog.csdn.net_BADAO_LIUMANG_QIZHI_article_details_83011108]: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/83011108
[Image 1]: 
[70]: https://img-blog.csdn.net/20181011143511345?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 1]: https://img-blog.csdn.net/20181011143515227?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[https_download.csdn.net_download_badao_liumang_qizhi_10713691]: https://download.csdn.net/download/badao_liumang_qizhi/10713691