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文件夹