webpack第一个Demo

安装webpack

1. 全局安装webpac,使用npm

npm install webpack -g

1. 检查webpack是否安装成功

webpack -v

基本配置

1. 使用npm初始化项目生成package.json文件

   npm init

    

2. 局部安装webpack

3. npm install --save-dev webpack
   

4. 新建webpack配置文件，命名为webpack.cofig.js

5. // ./webpack.config.js
   module.exports = {
       entry: "./app.js",  //程序入口
       output: {
           path: './build',    //构建输出路径
           filename:'main.js'  //构建输出的文件名
       }
   }

    

6. 开始测试，写一个index.html，创建一个js目录，里面创建app.js文件。修改webpack.config.js

7. //app.js
   console.log("this is webpackDemo1");
   

   module.exports = {
       entry: "./js/app.js",
       output: {
           path: './build',
           filename:'main.js'
       }
   }

    

8. 在命令行里进入到当前项目根目录，运行webpack命令，会在根目录下生成build目录，该目录下main.js是打包后的js文件
9. 为了实现webpack自动刷新，需要安装webpack服务器：webpack-dev-server
10. 先安装全局的webpack-dev-server
11. 再到具体的目录下安装局部的webpack-dev-server

12. npm install --save-dev webpack-dev-server

13. 实现自动刷新，代码热加载

14. 运行webpack服务器，需要先进行配置，在webpack.config.js中添加如下配置：

    devServer: {
        contentBase: "./public",//本地服务器所加载的页面所在的目录
        historyApiFallback: true,//不跳转
        inline: true//实时刷新
      } 
    

15. 在控制台使用命令运行服务器：

16. webpack-dev-server
    

    然后可以在浏览器窗口打开http://localhost:8080