webpack安装配置

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

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

  1. 新建dist文件夹(浏览器最终要读取的文件都输出在这里面),
    src文件夹(用于创建一个项目入口,自己项目都写在这里)
    同时在dist中创建一个index.html ,在src中创建一个index.js

  2. 开始安装webpack(局部安装:只用于该项目)
    –save-dev 表示保存在项目里,并写入package.json配置文件。

	npm install webpack --save-dev

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

  1. 安装 webpack-cli
   npm install webpack-cli --save-dev
  1. 安装lodash
   npm install  lodash --save-dev
  1. 编写例子

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>
  1. 删除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')//输出位置
 }
};
  1. 构建项目
npx webpack --config webpack.config.js

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

<script src="bundle.js"></script>
  1. package.json中加入
 "scripts"中加入
    "build": "webpack --config webpack.config.js --mode development"
  1. 重新构建项目
   npm run build
  1. 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//配置服务端端口号
  }
};
  1. 在package.json里配置webpack-dev-server
 "scripts": {
    "server":"webpack-dev-server --config webpack.config.js"
  }

16 启动服务器

npm run server
在浏览器输入localhost:9000即可访问。
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值