webpack创建服务

最新推荐文章于 2023-07-26 11:57:21 发布

静文melody

最新推荐文章于 2023-07-26 11:57:21 发布

阅读量608

点赞数 1

本文链接：https://blog.csdn.net/weixin_44738797/article/details/88715190

版权

我们开发时候肯定是希望用localhost的方式或者一个ip地址的方式来访问我们自己的页面，不会想用file:///D:/code/nodejscode/webpack_demo/dist/inedex.html此种方式，这个时候我们就希望开启一个服务，在当前build目录下，生成这样的一个文件，
webpack 也内置了一个开发服务，通过impress 实现这样一个静态服务，
可以在命令中 yarn add webpack-dev-server -D 其中-D也是开发依赖，

也可以npx webpack-dev-server （或者配一个脚本？怎么配？），它的好处是不会真实的打包文件，而是生成所谓内存中的打包，把文件写入内存中，
在这里插入图片描述
此时我们可以访问 http://localhost:8080/ ：

此时它默认以当前目录生成了个静态目录，
但我们希望它可以自动进入build 里打开页面，所以我们需要在webpack.config.js中设置，
module.exports:{
devServer : { //开发服务器的配置
port:3000 ,//自定义访问的端口号
progress:true,
contentBase:’./build’ //指定运行目录
}
}
此时我们将命令webpack-dev-server 加入到package.json 中，方便以后run
在这里插入图片描述

此处应该配置为 “dev”: “webpack-dev-server --config webpack.config.my.js”,上图配错.
至于怎么发现的，当我运行npm run dev 后再访问3000端口，此处目录下没有index.html 这些dist目录下的文件，我就知道了3000端口的程序运行的目录不在dist，而是其他地方，但webpack.config.my.js 文件没有写错，唯一可能性是此时node 并没有调用webpack.config.my.js 文件，而是用的默认的webpack.config.js 这个默认文件！！！！

所以，我打开了package.json重新编辑了下 dev命令，再次回到cmd中运行npm run dev，此时又提醒 Error: listen EADDRINUSE: address already in use 127.0.0.1:3000，也就是说3000正在运行，我不能在用这个端口了。所以决定杀死程序，重新启动3000。
故用查看进程的方式（netstat -ano查看所有进程windows的cmd命令之一）找到3000这个进程的pid，从而又找到 node.exe 是此进程的应用程序（windows cmd命令行窗口中敲入tasklist回车可查看所有正在运行的程序，也可以在task manager中查看），解决办法是kill该进程（tskill 7140，也可以等一会，他自己就死了。。）
在这里插入图片描述
此时我们想能自动配置到index.html中，故引入插件 html-webpack-plugin ，
调用 yarn add html-webpack-plugin -D

此时编辑webpack.config.my.js

但还没有装上插件（因为网速慢），报错信息 Error: Cannot find module ‘html-webpack-plugin’
，细节如下图：
在这里插入图片描述
但是，当我 run build 时候，报错：

错误信息提示为
Child html-webpack-plugin for “index.html”:
ERROR in Entry module not found: Error: Can’t resolve ‘D:\code\nodejscode\webpack_demo\src\index.html’ in ‘D:\code\nodejscode\webpack_demo’
原因： index.html 写成了 inedex.html 。。吐血，原来是拼写错误。。

改好后又报错：
在这里插入图片描述
错误信息为：

ERROR in Entry module not found: Error: Can't resolve 'src/index.js' in 'D:\code
\nodejscode\webpack_demo'
Child html-webpack-plugin for "index.html":
     1 asset
    Entrypoint undefined = index.html
    [0] ./node_modules/html-webpack-plugin/lib/loader.js!./src/index.html 297 by
tes {0} [built]
    [2] (webpack)/buildin/global.js 472 bytes {0} [built]
    [3] (webpack)/buildin/module.js 497 bytes {0} [built]
        + 1 hidden module

究其原因，查看下config.js中写成了这样：
在这里插入图片描述
说明此处路径不对，应该为

entry:'./src/index.js', //被打包的文件

再次执行命令npm run build ,运行成功：

<html>
<head></head>
<body>
<script type="text/javascript" src="bundle.js"></script></body>
</html>

如果想压缩目标文件 template 中的index.html 文件，我们可以这样做，加上removeAttributeQuotes:true ,如下：

  plugins:[//数组，放着所有的webpack插件
        new HtmlWebpackPlugin({
            template:'./src/index.html',
            filename:'index.html',
            minify:{
                  removeAttributeQuotes:true, // 决定template 是否有双引号
                  collapseWhitespace:true  //是否是一行（此处collapseWhitespace无自动提示，并不代表运行错误或者无效）
            },
            hash:true  //是否带有hash 
        })
    ]

此时如果双引号没有去掉的，是因为字符串里边有逗号，所以不能被去掉。
在这里插入图片描述

是否是一行效果：
在这里插入图片描述

是否带有hash效果：
在这里插入图片描述
要做到 bundle.js 是否每次产生的都是新的文件,只需要：

output:{
        filename:'bundle.[hash].js',//打包后的文件名
        path:path.resolve(__dirname,'dist') //路径必须是个绝对路径
    },

于是生成了一个新的bundle.XXXX.js, 效果如下：
在这里插入图片描述
如果不修改index.js ，每次产生的hash 是不变的，当修改index.js中的代码再编译时候才会产生新的hash值及新的文件，这里是防止覆盖，或者防止缓存的问题，
变化如下：

重新编译后，效果如下：

如果希望hash code 稍微短一点，可这样设置：

  output:{
        filename:'bundle.[hash:8].js',//打包后的文件名
        path:path.resolve(__dirname,'dist') //路径必须是个绝对路径
    },

效果如下：
在这里插入图片描述

怎样支持 css 模块， js 模块，图片的转化，见下一篇文章。

要思考的问题：
yarn.lock 文件是什么，有什么作用？
为什么是devServer这个节点？因为命令是webpack-dev-server,我猜是死规定，没有为什么。
webpack devserver的说明
一般我们在项目中如果用webpack的话，基本都会用到webpack-dev-server,配置大致如下：

devServer={
contentBase: basePath,
historyApiFallback: true,
hot: true,
devtool: ‘eval’,
host: ‘0.0.0.0’,
port: 3009,
inline: true,
noInfo: false,
// proxy: {
// ‘*’: {
// target: ‘http://localhost:8088’,
// secure: false
// // changeOrigin: true
// }
// }
};

静文melody

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack创建服务

我们开发时候肯定是希望用localhost的方式或者一个ip地址的方式来访问我们自己的页面，不会想用file:///D:/code/nodejscode/webpack_demo/dist/inedex.html此种方式，这个时候我们就希望开启一个服务，在当前build目录下，生成这样的一个文件，webpack 也内置了一个开发服务，通过impress 实现这样一个静态服务，可以在命令中 y...
复制链接

扫一扫