码迷,mamicode.com
首页 > Web开发 > 详细

webpack项目搭建

时间:2021-07-05 19:01:56      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:基本   pac   lan   tps   exports   eating   run   script   创建   

官方文档

1、初始化package.json文件

   npm init -y

技术图片

2、创建基本目录结构

技术图片
技术图片
技术图片

3、配置webpack

 npm i -D webpack

4、创建并配置 webpack.config.js 文件

技术图片
技术图片

var path = require(‘path‘)
module.exports = {
	entry: ‘./src/main.js‘,
	output: {
		path: path.join(__dirname, ‘./dist/‘), //这里必须是绝对路径
		filename: ‘bundle.js‘
	}
}

5、配置 npm scripts

5.1 找到package.json 文件

技术图片

{
  "name": "demo3",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^5.42.0",
    "webpack-cli": "^4.7.2"
  }
}

6、打包

npm run build 

技术图片

6.1、得到dist文件

技术图片
技术图片

7、在index.html中引入dist/bundle.js文件

技术图片

7.1、运行index.html文件

技术图片

8、自动编译

技术图片

8.1、 运行时运行 npm run watch-build

webpack项目搭建

标签:基本   pac   lan   tps   exports   eating   run   script   创建   

原文地址:https://www.cnblogs.com/191080438qq/p/14968520.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!