webpack基本使用

四个核心概念：入口、输入、loader、插件(完成一些loader不能完成的任务)
特点：
1.所有的文件都是模块
2.本身只能加载JS/JSON文件，其他的CSS等文件，需要下载对应loader加载(转换)

一、初始化项目
1.项目的根目录下，生成package.json文件

{
  'name":"webpack_test',
  'version":"1.0.0'
}

2.安装webpack
npm install webpack -g //全局安装
npm install webpack --save-dev //局部安装

二、编译打包应用
1.创建入口(根目录下)：src/js/entry.js 所有的模块都要汇集到主模块

document.write('entry.js is work')

2.创建主页面：dist/index.html
把即将编译的js文件与主页面关联

<script src='bundle.js'></script>

3.编译js

webpack src/js/entry.js(被打包的文件) dist/bundle.js(定义打包生成的目标文件)

4.查看页面效果

三、添加js(json)文件
1.创建第二个js：src/js/math.js

//暴露模块
export funxtion foo(x) {
  return x * x
}

2.在entry.js(入口)应用添加的文件

import {foo} from './math.js'

document.write('entry.js is work')
document.write(foo(3))

3.重新编译

四、优化打包命令 使用webpack配置文件
1.根目录 创建webpack.config.js

const path = require('path') //node内置的模块用来去设置路径的

module.export = {
  entry: './src/js/entry.js"'// 入口文件的配置
  output: {                      // 出口文件的配置
      filename: 'bundle.js'  // 输出的文件名
      path: path.resolve(__dirname, 'dist/js/')
  }
}

2.可以直接使用webpack命令打包

五、打包css和图片文件
1.需要安装对应的loader
npm install css-loader style-loader --save-dev (css的loader)
npm install file-loader url-loader --save-dev (图片的loader)

2.创建css文件 src/css/text.css

.box1{
  background-image:url('../image/logo.jpg')
}

3.将css文件引入到主模块(入口)中 entry.js

import {foo} from './math.js'
import '../css/test.css'

document.write('entry.js is work')
document.write(foo(3))

4.需要使用loader才能成功加载css
在webpack.config.js中添加

module.export = {
  entry: './src/js/entry.js' ,// 入口文件的配置
  output: {                      // 出口文件的配置
    filename: 'bundle.js',  // 输出的文件名
    path: path.resolve(__dirname, 'dist/js/')
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      },
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192
            }
          }
        ]
      }
    ]
  }
}

4.重新打包

六、热加载
1.利用webpack开发服务器工具：webpack-dev-server
2.下载：
npm install --save-dev webpack-dev-server
3.webpack配置，在webpack.config.js的module.export.中添加

 devServer: {
   // 不添加下一行的话，可以把index.html放到项目根目录下
   contentBase: './dist'  //webpack-dev-server 默认服务于跟目录下index.html
 }

4.执行命令 webpack-dev-server 热加载：开发的一个工具
会本地搭建一个服务器，localhost
热加载：源文件发生变化时，页面会变化

七、插件的使用
1.下载 npm install --save-dev 插件名
2.引入
在webpack.config.js中引入 const chaJian = require('插件名')
3.使用
在module.export.中添加

  plugins: [
    new chaJian(参数)
  ]