前置条件
node
起步
- 初始化package.json, 执行
npm init
一直回车就可
- 安装webpack,执行如下命令
npm i webpack -S -D
-S -D 是添加到package的dependencies devDependencies中
- 新建 index.html
在根目录可以手动新建，也可以命令行创建
type > index.html
- 新建 app.js
type > app.js
- 新建 test.js
type > test.js
- 新建 webpack.config.js
type > webpack.config.js
- 修改html
<!DOCTYPE html>
<html>
<head> <meta charset="UTF-8"> </head>
<body> <div id="app" ></div>
<script src="./dist/bundle.js"></script>
</body>
</html>
- 修改test.js
export const show = function (content) {
window.document.getElementById ('app') .innerText = 'Hello1' + content
}
- 修改app.js
import { show } from './test'
show (' world')
- 修改webpack.config.js
const path= require ('path')
module.exports = {
entry:'./app.js',
output: {
filename:'bundle.js',
path: path.resolve( __dirname,'dist')
}
}
- 运行webpack打包命令
webpack --config .\webpack.config.js
点开html可以看到效果
-
安装 webpack-cli 帮助我们使用简单的方式打包，如
npm run build安装命令
npm i webpack-cli -D -
修改package.json
添加"build": "webpack --config ./webpack.config.js"到scripts中
下面是scripts中代码
"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "webpack --config ./webpack.config.js" } -
运行
npm run build点开html 可以看到一样的效果
-
目录结构
demo1.1
--index.html
--app.js
--test.js
--webpack.config.js
--package.json
网友评论