webpack笔记

·  阅读 70

1、npm install -g webpack 全局安装
2、npm init 然后 npm install --save-dev webpack 进行项目目录的安装
3、建立项目结构分为 src和dist两个文件 src 是源码文件 dist是编译打包好的文件
4、第一次打包 webpack src/entery.js dist/bundle.js 如果发生了报错 webpack src/entery.js --output dist/bundle.js --mode development
5、然后 npm install -g live-server 运行 live-server
6、配置文件:webpack.config.js, 入口和出口文件

module.export = {
    // 入口文件的配置项
      entry: {},
    // 出口文件的配置项
      output: {},
    // 模块:解读css、图片如何转换和压缩
      module: {}
    // 插件用户生产模版和各种功能
      plugins: {},
    // 配置webpack服务功能
      devServer: {}}

entry: 配置入口文件的地址,可以配置单个入口也可以配置多个入口

output: 配置出口文件的地址,也可以配置多个出口

module: 配置模块,主要是解析css和图片转换压缩等功能

plugins: 配置插件,根据所需要的功能配置不同的插件

devServer:配置开发服务功能

entry选项

webpack.config.js文件中的entry选项

entry: {
    entry: './src/entry.js'
}

output选项中我们用到了path,所以我们需要在webpack.config.js 的头部引入path  const path = require('path');   path.resolve(__dirname,'dist')的意思就是获取项目的绝对路径

output: {
    // 打包的路径文件
    path: path.resolve(__dirname, 'dist'),
    // 打包的文件名称
    filename: 'bundle.js'
}


分类:
阅读
标签:
分类:
阅读
标签:
收藏成功!
已添加到「」, 点击更改