Webpack学习-从 helloworld 开始

从 helloworld 开始

1. 初始化目录

npm init
// 接着一直回车

2. 安装 webpack （也可以用 cnpm）

npm install webpack --save-dev

3. 安装 webpack-cli （也可以用 cnpm）

npm install webpack-cli --save-dev

4. 创建以下目录,并添加内容

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

index.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'

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

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

6. 启动

npm run build

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