webpack如何配置文件webpack是一个JavaScript应用程序的静态模块打包器。当webpack处理应用程序

1.webpack

网站:www.webpackjs.com/

https://webpack.github.io/

概念: webpack是一个JavaScript应用程序的静态模块打包器。当webpack处理应用程序的时候，它会递归的构建一个关系依赖图，其中就包含应用程序需要的每一个模块（js,css,图片），最后将所有的这些模块打包成一个资源包(bundle)文件

用途: 资源打包后，供浏览器端请求，只需要请求一个文件即可。

注意: 在项目初步开发完成后，运行webpack打包，最后把打包后的资源上传到web服务器

3.webpack使用过程

(1)准备好客户端项目资源(css,js,图像,html)

(2)创建项目的描述文件: package.json

npm  init  -y

(3)下载webpack及其依赖的模块,添加为开发依赖

npm install webpack --save-dev

(4)创建webpack配置文件: webpack.config.js

module.exports={
  mode:'development',
  entry: './src/js/index.js',
  output:{
    path: __dirname+'/dist',
    filename: 'bundle.js'
  },
  module:{
    rules:[
      {test:/\.css$/, use:['style-loader','css-loader']}
    ]
  }
}

（5）运行webpack，根据配置文件对静态资源打包

或者配置 package.json中scripts下： "build":"webpack" 运行 npm run build 就可以打包

(6) 下载支持css的加载器

npm install style-loader css-loader --save-dev