webpack簡單例子

webpack打包簡單例子

1. 安裝node

2. 查看node版本，node-v，查看npm版本，npm-v

3. 創建一個新文件夾 mkdir my-project

4. 打開文件夾cd my-project

5. 初始化項目 npm init -y

6. 初始化webpack npm install webpack webpack-cli --save-dev\

7. 查看webpack版本 ./node_modules/.bin/webpack -v

8. 在my-peoject目錄下新建webpack.config.js配置文件

   'use strict';
   const path=require('path');
   module.exports={
    entry:'./src/index.js',                 //打包文件路徑
    output:{
       path:path.join(__dirname,'dist'),   //輸出文件路徑
       filename:'bundle.js'                //輸出文件名
    },
    mode:'production'
   };
   
   

9. 在my-peoject目錄下創建一個新的文件夾src

10. 在src中新建index.js，helloworld.js

11. helloworld.js代碼如下

    export function helloworld() {
        return 'hello webpack';
    }
    

12. index.js代碼如下

    import { helloworld } from './helloworld';
    document.write(helloworld())
    

13. 運行打包命令

     ./node_modules/.bin/webpack
    

14. 打包完之後會多一個dist文件夾