webpack使用的基本配置

在前端自动化构建开发当中，利用webpack可以很大程度的优化前端开发的工作。在学习webpack之余，总结了一下webpack的基本使用方法。

1） 安装：npm 全局安装webpack

npm install webpack –g

2） 基本使用例子：hello.js

(1) 新建webpackdir文件夹 mkdir webpackdir

mkdir webpackdir

(2)进入文件夹，初始化 npm init

(3)项目中安装开发依赖 webpack

npm install webpack --save-dev

(4)创建hello.js

function hello(str) {
  alert(str)
}

(5)控制台进行打包(hello.js =>hello.bundle.js)

webpack hello.js hello.bundle.js

Hash: 打包的哈希值
Version: webpack版本
Asset: 打包之后生成文件
Chunks: 打包的模块数

Chunk Names: 打包分块的块名称

3） 例子：利用webpack对js文件中引入其他js、css文件，并对css文件进行编译

(1)创建index.js
(2)创建被引入的test.js以及style.css
(3)在index.js中引入test.js、style.css

Webpack 在处理css文件时，需要有对应的loader进行编译 项目文件中需要安装 css-loader/style-loader

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

require('./test.js');
require('style-loader!css-loader!./style.css');

css需先用css-loader进行处理再用style-loader进行处理

(4)webpack打包文件，并将打包后的js引入index.html中

4） webpack的基本配置

文件夹下安装 webpack

npm install webpack --save-dev

创建资源文件目录 /src /dist 创建webpack.config.js配置文件(默认配置文件名称)

module.exports = {
  entry:'./src/main.js' , 打包入口地址
  output:{
    path: __dirname+'/dist/js', 打包文件输出地址
    filename:'bundle.js' 打包文件名称
  }
}

运行webpack

·详解entry、output

entry
单个入口（简写）语法 用法：entry: string|Array< string>
const config = {
  entry: './path/to/my/entry/file.js'
};

module.exports = config;
entry 属性的单个入口语法，是下面的简写：

const config = {
  entry: {
    main: './path/to/my/entry/file.js'
  }
};
当你向 entry 传入一个数组时会发生什么？向 entry 属性传入「文件路径(file path)数组」将创建“多个主入口(multi-main entry)”。在你想要多个依赖文件一起注入，并且将它们的依赖导向(graph)到一个“chunk”时，传入数组的方式就很有用。

对象语法 用法：entry: {[entryChunkName: string]: string|Array< string>}
const config = {
  entry: {
    app: './src/app.js',
    vendors: './src/vendors.js'
  }
};
对象语法会比较繁琐。然而，这是应用程序中定义入口的最可扩展的方式。
“可扩展的 webpack 配置”是指，可重用并且可以与其他配置组合使用。这是一种流行的技术，用于将关注点(concern)从环境(environment)、构建目标(build target)、运行时(runtime)中分离。然后使用专门的工具（如 webpack-merge）将它们合并。

demo 两个入口文件打包到同一个js中

module.exports = {
  entry:['./src/main.js','./src/a.js'] , 打包入口地址
  output:{
    path: __dirname+'/dist/js', 打包文件输出地址
    filename:'bundle.js' 打包文件名称
  }
}
output
配置 output 选项可以控制 webpack 如何向硬盘写入编译文件。注意，即使可以存在多个入口起点，但只指定一个输出配置。
在 webpack 中配置 output 属性的最低要求是，将它的值设置为一个对象，包括以下两点：
filename 用于输出文件的文件名。
目标输出目录 path 的绝对路径。
const config = {
  output: {
    filename: 'bundle.js',
    path: '/home/proj/public/assets'
  }
};

module.exports = config;
此配置将一个单独的 bundle.js 文件输出到 /home/proj/public/assets 目录中。

=> 单页面应用配置

指定entry/output 路径

单个入口文件情形
const config = {
  entry:'./src/main.js',
  output:{
    filename:'bundle.js',
    path:__dirname+'/dist/'
  }
}
module.exports = config;

多个平行入口文件打包在一起
const config = {
  entry:['./src/main.js','./src/page.js'],
  output:{
    filename:'bundle.js',
    path:__dirname+'/dist/'
  }
}
module.exports = config;

=> 多页面应用配置

指定entry/output 路径

const config = {
  entry:{
    index:'./src/main.js',
    page:'./src/page.js'
  },
  output:{
    filename:'[name]_bundle.js',
    path:__dirname+'/dist/'
  }
}

module.exports = config;
占位符有3个
[name]  入口文件名
[hash]  哈希值(哈希值可以认为是文件的版本号，只有文件发生变化时，哈希值才发生变化)
[chunkhash] 每一个chunk的哈希值

const config = {
  entry:{
    index:'./src/main.js',
    page:'./src/page.js'
  },
  output:{
    filename:'[name]-[chunkhash]-bundle.js',
    path:__dirname+'/dist/'
  }
}

module.exports = config;

在webpack的使用过程中，可参考一下webpack的官方api文档，文档详述了webpack的配置参数，更有助于对webpack的理解。本文结。