webpack入门（一）是否使用 --save-dev 取决于你的应用场景。假设你仅使用 webpack 进行构建操作

安装

npm install --save-dev webpack
# 或指定版本
npm install --save-dev webpack@<version>

是否使用 --save-dev 取决于你的应用场景。假设你仅使用 webpack 进行构建操作，那么建议你在安装时使用 --save-dev 选项，因为可能你不需要在生产环境上使用 webpack。如果需要应用于生产环境，请忽略 --save-dev 选项

如果是安装webpack4+,还要安装一下webpack-cli（此工具用于在命令行中运行 webpack）:

npm install --save-dev webpack-cli

运行命令，简单打包一个js文件：

webpack index.js index.bundle.js

index.js这个文件就被打包成了名叫index.bundle.js的文件

命令标签

具体标签就不一一解释了，可以挪步 webpack.docschina.org/api/cli/#ro… 查看各种标签对应的解释

webpack --progress --watch --mode development

npm scripts

我们在项目中一般使用命令行来调试，所以我们也喜欢使用自定义命令来进行webpack构建打包，我们打开项目中的package.json，在scripts中添加我们自定义的运行脚本:

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
  + "dev": "webpack --progress --mode development",
  + "build": "webpack --progress --mode production"
 },

这样，我们就可以使用npm run dev和npm run build进行打包了，这里使用了--mode来表明构建在开发环境还是生产环境，如果不用--mode呢，系统会给你报错，告诉你，必须表明构建的环境，当然也可以不在这里加--mode来表明构建环境，可以在webpack.config.js配置文件中通过增加配置来直接确定构建环境:

//webpack.config.js

module.exports = {
  mode: 'production',
}

webpack.config.js配置文件

webpack在打包的时候会在运行目录下自动去寻找webpack.config.js这个文件，这件事情呢官方已经给我们做好了，所以呢，我们只要去创建以及配置webpack.config.js这个文件就行了：

//webpack.config.js

//这里使用的是commomjs的语法
module.exports = {
  
}

entry入口

入口起点(entry point) 指示 webpack 应该使用哪个模块，来作为构建其内部依赖图(dependency graph) 的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的

module.exports = {
  entry: './index.js',
}

output输出

const path = require('path');

module.exports = {
  entry: './index.js',
  output: {
    path: path.resolve(__dirname,'dist'),
    filename: 'bundle.js'
  }
}

在上面的示例中，我们通过 output.filename 和 output.path 属性，来告诉 webpack打包以后文件的名称，以及我们想要将打包后的文件生成到哪里

当我们实际开发的项目中，打包后肯定会有html，css，js等文件类型，如果仅在output.path中指定了dist文件夹路径的话，打包后所有文件都会放在dist文件夹下，显得比较混乱，这肯定不是我们想要的，所以，我们可以做如下处理：

const path = require('path');

module.exports = {
  entry: './index.js',
  output: {
    path: path.resolve(__dirname,'dist'),
    filename: 'js/bundle.js'  //注意，这里增加了一下路径
  }
}

在上面示例中，我们给output.filename的文件增加了一个路径，那么，打包后的bundle.js文件就被放置到了dist/js文件路径下去了

打包多个chunk

const path = require('path');

module.exports = {
  entry: {
    main: './index.js',
    another: './a.js'
  },
  output: {
    path: path.resolve(__dirname,'dist'),
    filename: 'js/[name].js'
  }
}

entry也可以配置成一个对象，对象中的key则为每个chunk的名字，当我们只配置 entry: './index.js',的时候，其实默认的是entry: { main: './index.js' }

上面示例在打包后会在dist/js文件夹下生成 main.js 和 another.js两个js文件，output.filename中的[name]呢其实就是一个占位符，表明打包后的文件以chunk的名称来命名，当然这里的占位符还有模块标识hash [hash]、内容产生的hash [contenthash]等等,这些占位符具体解释呢可以查阅官网，我们用的比较多的呢还是[name]

描述入口的对象

用于描述入口的对象。你可以使用如下属性：

dependOn: 当前入口所依赖的入口。它们必须在该入口被加载前被加载。
filename: 指定要输出的文件名称。
import: 启动时需加载的模块。
library: library 的相关选项。
runtime: 运行时 chunk 的名字。如果设置了，就会创建一个以这个名字命名的运行时 chunk，否则将使用现有的入口作为运行时

module.exports = {
  entry: {
    main: './index.js',
    another: {
      dependOn: 'main',
      import: './app.js'
    }
  }
}

好了，关于webpack的最简单基础的配置entry和output我们先记录到这里啦

webpack入门（一）

安装