webpack随笔记02创建第一个打包程序来写一个最简单的demo,回到我们第一节学html-css-js的课程在上

创建第一个打包程序

来写一个最简单的demo,回到我们第一节学html-css-js的课程在上次创建的文件中创建一个index.js（这个相当于入口文件,vue我们能看见到main.js）,还有一个index.html文件. 再创建一个js文件将函数导出,在index引入并且调用

index.html

`<html>
  <head >
    <meta charset="utf-8"/>
    <script src="./index.js"></script>
  </head>
 <body></body>
</html>

test.js

这里是导出函数测试能否被入口文件给引入

function talk() {
    console.log('我是测试模块的函数');
}
export default talk;

index.js

import talk from "./test";
function speak() {
    console.log('index的speak函数执行');
    talk();
}
speak();

这段代码在浏览器正常来说自然是不可以正常运行的因为这两个独立的文件根本没法引入我们尝试一下打包文件 npx webpack --entry=./index.js --mode=development 来解析一下这段命令 --entry 指的是入口文件路径, --mode 是模式有三种production、none,还有development

将index.js放入src目录下

webpack打包的默认路径就是src/index.js

实际生产中我们经常把配置写到一个配置的文件

配置文件叫 webpack.config.js

module.exports = {
    entry:'./src/index.js',   //项目的入口文件.叫啥无所谓,默认是 src/index.js
    output: {    //输出文件的配置默认是main.js
    //path nodejs内部帮我们拼接好了
        filename:'outPutMain.js' 
    },
    mode:'development'

}

安装服务

npm install webpack-dev-server -D 就像vue那样内置一个服务器可以随时刷新.同样这个只安装在开发环境中,正式上线我们会把他放到我们打包自己的服务器上面

在package.json中加入启动服务器的命令

"dev":'webpack-dev-server' 同时在webpack.config.js文件中加入有关服务器的配置内容

// 导出一个对象
module.exports = {
    entry:'./src/index.js',   //项目的入口文件.叫啥无所谓,默认是 src/index.js
    output: {    //输出文件的配置默认是main.js
        filename:'outPutMain.js' 
    },
    mode: 'development',
    devServer: {
       publicPath:'./dist' 
    }

}

上面webpack帮我们做了什么事情,简单来说就是帮我们把包大好(刚才的步骤)，然后启动服务器,一旦浏览器访问就会将静态资源返回给浏览器请注意 index.html要默认放在 public目录下