webpack 学习-从 helloworld 开始从helloworld开始初始化目录安装webpack安装webpa

从 helloworld 开始

npm init
// 接着一直回车

安装 webpack

npm install webpack --save-dev

安装 webpack-cli

npm install webpack-cli --save-dev

│  index.html // 模板文件
│
├─config
│       webpack.config.js // webpack 配置
│
└─src
        index.js // 打包的文件

index.HTML

<!doctype html>
<html>

    <head>
        <title>webpack</title>
    </head>
    
    <body>
        <script src="dist/bundle.js"></script>
    </body>

</html>

webpack.config.js

const path = require('path');

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname,'../', 'dist'),
        filename: 'bundle.js'
    }
};

index.js

console.log("loaded")
document.getElementsByTagName('body')[0].innerHTML='helloword'

添加启动命令在 package.json 的 scripts 中添加：

"build": "webpack --config config/webpack.config.js --mode production"

启动

npm run build

双击 index.html 用浏览器打开，看到 helloword
DONE