webpack的配置与使用

安装配置webpack

先再项目中使用npm init -y 命令初始化一个package.json文件；
新建一个名字为src文件夹，将静态资源放入该文件夹中；
运行npm install webpack webpack-cli -D 命令，安装webpack相关的包；
再项目根目录中，创建名为webpack.config.js 的webpack文件；
在webpack的配置文件中，初始化基本配置；

module.exports={
   
mode:'development'//项目上线时需要将这个改为production来进行打包
}

在package.json文件中的scripts的节点下新增dev脚本；

 "scripts": {
   
 "test": "echo \"Error: no test specified\" && exit 1",
 "dev": "webpack"   
  },

在终端中运行 npm run dev 命令，启动webpack进行项目的打包
会在项目中生成一个dist文件夹，在这个文件夹中默认生成名为main.js的文件
在页面中引入该文件即可；
我们也可以更改这些：在webpack.config.js文件中配置

module.exports = {
      
 // 编译模式   
  mode: 'development', //development  上线就production打包   
   // 路口文件   
    entry: path.join(__dirname, './src/index.js'), 
       //输出文件   
        output: {
         
          path: path.join(__dirname, './dist'), //输出文件的存放路径    
              filename: 'bundle.js' //输出文件的名称  
               },
     }

这样生成的打包好的文件就是bundle.js，这时我们只需要引入这个文件到页面就可以了
这就是webpack的基本使用；
这个时每次进行项目的更改的时候都需要再次运行npm run dev 这个命令；这就比较麻烦；
人都是懒惰的所以我们来进行webpack的自动打包功能；

webpack的自动打包

运行npm install webpack-dev-server -D命令安装支持项目自动打包的工具
这时我们需要将package.json—>script的节点下的dev进行更改；
将webpack更改为webpack-dev-server ；
里面的 --open 是每次运行默认打开浏览器host是地址，port是端口号；
这样之后在页面中引入的时候应改为/main.js

 "scripts": {
    
 "test":