Webpack 参数详解

webpack.config.js:

 安装webpaack

a. 在全局中安装 webpack：npm install webpack -g

b. 将webpack安装到项目并将webpack写入package.json的devDependencies中：进入项目根目录，然后在命令行中输入npm install webpack --save-dev。

const config = {
  output: {
    filename: 'bundle.js',
    path: '/home/proj/public/assets'
  }
};
 
module.exports = config;

filename 用于输出文件的文件名。b.目标输出目录 path 的绝对路径。

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

webpack 参数介绍

　　1.webpack有一个默认的配置文件 webpack.config.js，这个文件需要手动的创建，位于项目根目录中。可以为一个项目设置多个配置文件，已达到不同的配置文件完成不同的功能。怎么设置后面介绍。

　　2.webpack的配置文件会暴露出一个对象，格式如下：

　　　　module.exports = {
　　　　　　//配置项
　　　　}

　　3.常用配置项将要说明

　　　　entry: 打包的入口文件，一个字符串或者一个对象
　　　　output: 配置打包的结果，一个对象
　　　　fileName：定义输出文件名，一个字符串
　　　　path： 定义输出文件路径，一个字符串
　　　　module:定义对模块的处理逻辑，一个对象
　　　    loaders：定义一系列的加载器，一个数组
　　　　　　　　[
　　　　　　　　　　{
　　　　　　　　　　　　test:正则表达式，用于匹配到的文件
　　　　　　　　　　　　loader/loaders：字符串或者数组，处理匹配到的文件。如果只需要用到一个模块加载器则使用　　　　　　　　　　　　　　　　　loader：string，如果要使用多个模块加载器，则使用loaders：array

　　　　　　　　　　　　include:字符串或者数组，指包含的文件夹
　　　　　　　　　　　　exclude：字符串或者数组，指排除的文件夹
　　　　　　　　　　}
　　　　　　　　]
resolve:影响对模块的解析，一个对象查找module的话从这里开始查找

extensions：自动补全识别后缀，是一个数组自动扩展文件后缀名，意味着我们require模块可以省略不写后缀名

alias: 将类似jquery等文件引入进来重命名方便调用
plugins:定义插件，一个数组

webpack-dev-server

1.webpack-dev-server是一个轻量级的服务器，修改文件源码后，自动刷新页面将修改同步到页面上

2.安装webpack-dev-server：
　　　　全局安装：npm install webpack-dev-server -g
在项目中安装并将依赖写在package.json文件中: npm install webpack-dev-server --save-dev

　　3.使用命令webpack-dev-server --hot --inline完成自动刷新
　　4.默认的端口号是8080，如果需要8080端口被占用，就需要改端口，webpack-dev-server --port 3000(将端口号改为3000)

　　5.安装webpack-dev-server后就可以在命令行中输入webpack-dev-server开启服务，然后在浏览器地址栏中输入localhost:端口号，就可以在浏览器中打开项目根目录的index.html文件，如果项目根目录中没有index.html文件，就会在浏览器中列出项目根目录中的所有的文件夹。
　　6.第五条只是启动服务并不能自动刷新，要自动刷新需要用到webpack-dev-server --hot --inline

　　7.当使用webpack-dev-server --hot --inline命令时，在每次修改文件，是将文件打包保存在内存中并没有写在磁盘里(默认是根据webpack.config.js打包文件，通过--config xxxx.js修改)，这种打包得到的文件和项目根目录中的index.html位于同一级（但是你看不到，因为它在内存中并没有在磁盘里）。使用webpack命令将打包后的文件保存在磁盘中

　　8.每一次都敲一长串命令太麻烦，在项目根目录的package.json文件的scripts配置中添加配置，如"build":"webpack-dev-server --hot --inline",然后在命令行中输入 npm run build就能代替输入一长串命令（webpack-dev-server --hot --inline），运行webpack-dev-server --hot --inline默认是找webpack.config.js,通过--config命令可以修改为另一个配置文件。例如：webpack-dev-server --hot --inline --config 'webpack.es6.config.js'

　　9.配置根目录

（1）当在命令行中输入webpack-dev-server --hot --inline，再在浏览器中输入localhost：端口号，浏览器会在项目的根目录中去查找内容，通过--content-base可以配置根目录。如webpack-dev-server --hot --inline --content-base './build/'，在build文件夹中去加载index.html，如果没有

index.html文件，将会在浏览器中显示所有build目录下的文件和文件夹