webpack安装配置

最新推荐文章于 2024-04-18 11:10:37 发布

TardisKey

最新推荐文章于 2024-04-18 11:10:37 发布

阅读量247

点赞数

分类专栏：前端文章标签： webpack 前端

本文链接：https://blog.csdn.net/TardisKey/article/details/131514503

版权

前端专栏收录该内容

22 篇文章 2 订阅

订阅专栏

新建一个文件夹Test
在VsCode中打开这个文件夹
在这个文件夹目录下打开终端
执行 (可默认一直回车)

	npm init

结束后，生成一个packge.json文件

新建dist文件夹（浏览器最终要读取的文件都输出在这里面），
src文件夹（用于创建一个项目入口，自己项目都写在这里）
同时在dist中创建一个index.html ,在src中创建一个index.js
开始安装webpack（局部安装:只用于该项目）
–save-dev 表示保存在项目里，并写入package.json配置文件。

	npm install webpack --save-dev

同时生成node_modules文件夹。管理各种依赖

安装 webpack-cli

   npm install webpack-cli --save-dev

安装lodash

   npm install  lodash --save-dev

编写例子

index.js

import _ from 'lodash';
function component() {
var element = document.createElement('div');
// Lodash, now imported by this script
element.innerHTML = _.join(['Hello', 'webpack'], ' ');

return element;
 }
document.body.appendChild(component());

index.html

<!doctype html>
  <html>
   <head>
     <title>Getting Started</title>
   </head>
   <body>
    <script src="main.js"></script>
   </body>
  </html>

删除main.js，在新项目下新建一个webpack.config.js文件，写入

const path = require('path');
module.exports = {
mode: 'development',
entry: './src/index.js',//代表入口文件
output: {
filename: 'bundle.js',//代表输出文件
path: path.resolve(__dirname, 'dist')//输出位置
 }
};

构建项目

npx webpack --config webpack.config.js

此时dist文档下出现一个bundle.js的文件,修改dist/index.html 改成引入bundle.js

<script src="bundle.js"></script>

package.json中加入

 "scripts"中加入
    "build": "webpack --config webpack.config.js --mode development"

重新构建项目

   npm run build

webpack热更新

npm install webpack-dev-server --save-dev

在 webpack.config.js 配置相关参数

module.exports = {
  //...
  devServer: {
    static: path.join(__dirname, 'dist'),
    host:'localhost',//服务器IP地址，可以使用IP也可以使用localhost
    compress: true,//服务端压缩是否打开
    port: 9000//配置服务端端口号
  }
};

在package.json里配置webpack-dev-server

 "scripts": {
    "server":"webpack-dev-server --config webpack.config.js"
  }

16 启动服务器

npm run server
在浏览器输入localhost:9000即可访问。

TardisKey

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack安装配置

此时dist文档下出现一个bundle.js的文件,修改dist/index.html 改成引入bundle.js。同时在dist中创建一个index.html ,在src中创建一个index.js。–save-dev 表示保存在项目里，并写入package.json配置文件。新建dist文件夹（浏览器最终要读取的文件都输出在这里面），src文件夹（用于创建一个项目入口，自己项目都写在这里）在 webpack.config.js 配置相关参数。结束后，生成一个packge.json文件。
复制链接

扫一扫