webpack入门启动webpack工程

最新推荐文章于 2024-03-14 20:18:11 发布

霸道流氓气质

最新推荐文章于 2024-03-14 20:18:11 发布

阅读量2.3k

点赞数 1

分类专栏： Webpack 文章标签： webpack

本文链接：https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/83012059

版权

Webpack 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

前提：

安装完webpack以及webpack-dev-server

参照：

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中进行入口和输出的配置:

var path = require('path');
var config = {
 entry:{
  main:'./main'
 },
 output:{
  path:path.join(__dirname,'./dist'),
  publicPath:'/dist/',
  filename:'main.js'
 }

};

module.exports = config;

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

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

示例代码下载：

https://download.csdn.net/download/badao_liumang_qizhi/10713691

霸道流氓气质

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
webpack入门启动webpack工程

前提：安装完webpack以及webpack-dev-server参照：https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/83011108添加代码：1.首先在目录demo下创建一个js文件：webpack.config.js并初始化它的内容：var config = {};module.exp...
复制链接

扫一扫