webpack配置

webpack配置

1. 安装

安装nodejs,运行命令npm intall wepack –g 或者npm install webpack –save-dev进行全局和本地安装。

安装指定版本，运行命令npm install webpack@1.12.x --save-dev

若是须要使用webpack开发工具，请自行安装npm install webpack-dev-server --save-dev

 

2. 查看版本信息

运行 npm info webpack，便可查看webpack基本信息

 

3. 使用

1. 首先建立一个静态文件index.html,在静态文件里面引入bundle.js

2. 建立一个entry.js文件，写一个alert(‘webpack’);

3. 运行命令 webpack entry.js bundle.js

4. 这样，bundle.js就能够生成了

 

5. 运行index.html

  

6. 添加一个模块，并修改entry.js

   1. 新建module.js,写入module.exports = 'It works from module.js.'

   2. entry.js添加以下代码alert(require('./module.js'))

   3. 从新编译bundle.js,运行index.html

    

4. 原理：

Webpack 会分析入口文件，解析包含依赖关系的各个文件。这些文件（模块）都打包到 bundle.js 。Webpack 会给每一个模块分配一个惟一的 id 并经过这个 id 索引和访问模块。在页面启动时，会先执行 entry.js 中的代码，其它模块会在运行 require 的时候再执行。

编译后文件以下图

 

 

（经过对象的赋值和引用，造成一个调用关系链）

5. Loader

1. Webpack 自己只能处理 JavaScript 模块，若是要处理其余类型的文件，就须要使用 loader 进行转换

2. Loader 能够理解为是模块和资源的转换器，它自己是一个函数，接受源文件做为参数，返回转换的结果。这样，咱们就能够经过 require 来加载任何类型的模块或文件，好比 CoffeeScript、 JSX、 LESS 或图片。

3. Loader 自己也是运行在 node.js 环境中的 JavaScript 模块，它一般会返回一个函数。大多数状况下，咱们经过 npm 来管理 loader，可是你也能够在项目中本身写 loader 模块。正是因为loader运行在node环境里面，因此，loader读取文件变得垂手可得。

4. 按照惯例，而非必须，loader 通常以 xxx-loader 的方式命名，xxx 表明了这个 loader 要作的转换功能，好比 json-loader。在引用 loader 的时候可使用全名 json-loader，或者使用短名 json。这个命名规则和搜索优先级顺序在 webpack 的 resolveLoader.moduleTemplates api 中定义。Default: ["*-webpack-loader", "*-web-loader", "*-loader", "*"]

5. 安装 loader

1. 运行npm intall css-loader style-loader

2. 新建index.css文件，指定背景色为green

3. 修改entry.js文件require("!style-loader!css-loader!./style.css")，载入style-loader css-loader

4. 从新打包编译bundle.js,运行index.html

 

 

5. 若是每次 require CSS 文件的时候都要写 loader 前缀，是一件很繁琐的事情。咱们能够根据模块类型（扩展名）来自动绑定须要的 loader。

1. 将 entry.js 中的 require("!style!css!./style.css") 修改成 require("./style.css")，2. 运行$webpack entry.js bundle.js --module-bind 'css=style-loader!css-loader'或者webpack entry.js bundle.js --module-bind "css=style-loader!css-loader"，效果是同样的

6. 配置文件

1. Webpack 在执行的时候，除了在命令行传入参数，还能够经过指定的配置文件来执行。默认状况下，会搜索当前目录的 webpack.config.js 文件，这个文件是一个 node.js 模块，返回一个 json 格式的配置信息对象，或者经过 --config 选项来指定配置文件。

2. 经过npm init，咱们来建立package的基本信息

{

  "name": "webpack",

  "version": "1.0.0",

  "description": "'webapck demo'",

  "main": "bundle.js",

  "dependencies": {

    "css-loader": "^0.28.0",

    "style-loader": "^0.16.1"

  },

  "devDependencies": {},

  "scripts": {

    "test": "'test'"

  },

  "keywords": [

    "'webpack'"

  ],

  "author": "djl",

  "license": "ISC"

}

3. 如上图所示，为安装初始化后的配置信息，咱们看到，没有webpck的dependencies依赖，是由于咱们安装的webpack为全局的，经过wbpack -v咱们来查看一下webpack的版本信息，添加本地环境依赖

 

{

  "name": "webpack",

  "version": "1.0.0",

  "description": "'webapck demo'",

  "main": "bundle.js",

  "dependencies": {

    "css-loader": "^0.28.0",

    "style-loader": "^0.16.1",

    "webpack": "^2.3.3"

  },

  "devDependencies": {},

  "scripts": {

    "test": "'test'"

  },

  "keywords": [

    "'webpack'"

  ],

  "author": "djl",

  "license": "ISC"

}

4. 运行 npm install 便可安装本地webpack

5. 建立webpack.config.js文件，放置到根目录下，写入以下信息

var webpack = require('webpack') //引入webpack模块

 

module.exports = {//webpack导出模块

  entry: './entry.js',//入口文件，也就是咱们的entry.js文件，只有这一个

  output: {//输出目录配置

    path: __dirname, //当前目录为导出文件，若是对node不太熟悉，自行脑补

    filename: 'bundle.js'//导出文件名

  },

  module: { 

    loaders: [//webpack的loader模块配置

      {test: /\.css$/, loader: 'style-loader!css-loader'}//test为正则匹配css文件，loader为loader名称

    ]

  }

}

6. 最后entry.js咱们只须要require(‘./index.css’),从新运行编译bundle.js,便可

7. 插件

  1. 插件能够完成更多 loader 不能完成的功能。

  2．插件的使用通常是在 webpack 的配置信息 plugins 选项中指定。Webpack 自己内置了一些经常使用的插件，还能够经过 npm 安装第三方插件

  3. 咱们以BannerPluigin为例，来给输出文件添加注释信息

  4. 修改webpack.config.js文件，在modlue对象下方添加插件以下

     module: {

       loaders: [

         {test: /\.css$/, loader: 'style-loader!css-loader'}

       ]

  },

  plugins: [

       new webpack.BannerPlugin('This file is created by djl')

      ]

}

5. 从新编译bundle.js，打开文件，咱们已经看到注释信息了

   

8.开发环境

  1. 当项目逐渐变大，webpack 的编译时间会变长，能够经过参数让编译的输出内容带有进度和颜色webpack --progress --colors

  2. 若是不想每次修改模块后都从新编译，那么能够启动监听模式。开启监听模式后，没有变化的模块会在编译后缓存到内存中，而不会每次都被从新编译，因此监听模式的总体速度是很快的。webpack --progress --colors –watch

  3. 使用 webpack-dev-server 开发服务是一个更好的选择。它将在 localhost:8080 启动一个 express 静态资源 web 服务器，而且会以监听模式自动运行 webpack，在浏览器打开 http://localhost:8080/ 或 http://localhost:8080/webpack-dev-server/ 能够浏览项目中的页面和编译后的资源输出，而且经过一个 socket.io 服务实时监听它们的变化并自动刷新页面。

安装服务工具npm install webpack-dev-server –g  运行webpack-dev-server --progress –colors

 

9. webpack补充说明

  1.entry

entry能够是个字符串或数组或者是对象。  

当entry是个字符串的时候，用来定义入口文件：

entry: './js/main.js'

 

当entry是个数组的时候，里面一样包含入口js文件，另一个参数能够是用来配置webpack提供的一个静态资源服务器，webpack-dev-server。webpack-dev-server会监控项目中每个文件的变化，实时的进行构建，而且自动刷新页面：

entry: [

     'webpack/hot/only-dev-server',

     './js/app.js'

]

 

当entry是个对象的时候，咱们能够将不一样的文件构建成不一样的文件，按需使用，好比在个人hello页面中只要\引入hello.js便可：

entry: {

     hello: './js/hello.js',

     form: './js/form.js'

 }

 2.output

output参数是个对象，用于定义构建后的文件的输出。其中包含path和filename：

当咱们在entry中定义构建多个文件时，filename能够对应的更改成[name].js用于定义不一样文件构建后的名字。

publicPath：publicPath”项则被许多Webpack的插件用于在生产模式下更新内嵌到css、html文件里的url值。

path：“path”仅仅告诉Webpack结果存储在哪里

 

3. resolve 

webpack在构建包的时候会按目录的进行文件的查找，resolve属性中的extensions数组中用于配置程序能够自行补全哪些文件后缀：

resolve:{

     extensions:['','.js','.json']

 }

4. externals 

当咱们想在项目中require一些其余的类库或者API，而又不想让这些类库的源码被构建到运行时文件中，这在实际开发中颇有必要。此时咱们就能够经过配置externals参数来解决这个问题：

externals: {

     "jquery": "jQuery"

 }

5. loader

 loader的参数项随插件的不一样而不一样，具体请参考具体的插件设置