webpack简单搭建基础感悟

时间：2019-12-20 20:32:22 阅读：118 评论：0 收藏：0 [点我收藏+]

标签：size auth ack filename enc console error conf ports

实现局部webpack搭建并打包。

npm init 弄出一个package.json

首先npm i webpack webpack-cli -D

建立一个index.js,content.js.index.html

index.html里面引入index.js,

index.js里面的内容是：

import content from ‘./content‘

console.log(content())

content.js里面的内容是:

const fn = ()=>{

return ‘ok‘

}

export default fn

正常打开index.html是报错的，因为浏览器不支持import语法。

这时因为是局部的webpack，所以执行

npx webpack index.js

这时就会在你的文件夹生成一个dist文件夹，里面会有一个叫main.js文件

下面我们将content.js里面输出方式换一个。

moudle.exports = fn

执行 npx webpack index.js我们删除dist，会发现又生成一个dist文件。

在dist文件里面创建一个index.html.

引入这个dist文件夹里面的main.js

在浏览器打开这个index.html

发现浏览器可以打印‘ok‘

下面我来更改package.json里面的配置文件用npm run build来进行打包

创建一个webpack.config.js

如下：

const path = require(‘path‘)

module.exports = {

entry:{

main:‘./src/index.js‘

output:{

filename:‘bundle.js‘,

path:path.resolve(__dirname,‘dist‘)

}

package.json:

{

"name": "blood",

"version": "1.0.0",

"description": "",

"main": "index.js",

"scripts": {

"test": "echo \"Error: no test specified\" && exit 1",

"build": "webpack"

"author": "",

"license": "ISC",

"devDependencies": {

"webpack": "^4.41.4",

"webpack-cli": "^3.3.10"

}

创建一个src文件夹，放入刚才index.js,content.js

这时执行npm run build这时就可以新创建出一个dist文件夹里面会有bundle.js这时打包就成功了，dist文件夹中index.html引入这个bundle.js在浏览器中打开就可以看到’ok‘

webpack简单搭建基础感悟

标签：size auth ack filename enc console error conf ports

原文地址：https://www.cnblogs.com/MDGE/p/12074711.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行