webpack入门，让你不在难(二)

引言

     继上一篇《webpack入门，让你不在难》，简单的讲解了webpack是什么、安装与配置，有了上篇的基础，小编现在继续以示例的方式来理解webpack中常用的加载器与插件。

其中加载器主要是：

    JS[X]的加载

    CSS的加载

    HTML文件加载

    图片加载

    Less的加载

此次demo未使用示例讲解图片加载和less加载，可以参考看阮一峰大神提供的demo：https://github.com/ruanyf/webpack-demos#demo01-entry-file-source

其中插件主要讲解：

    webpack.optimize.UglifyJsPlugin

    html-webpack-plugin

    open-brower-webpack-plugin

DEMO目录结构

 package.json文件：

{

  "name": "webpack-xmind",

  "version": "1.0.0",

  "description": "",

  "main": "index.js",

  "scripts": {

    "test": "echo \"Error: no test specified\" && exit 1",

    "webpack": "webpack --config webpack.config.js --progress --display-modules --colors --display-reasons",

    "start": "webpack-dev-server --inline --hot"

  },

  "author": "",

  "license": "ISC",

  "devDependencies": {

    "babel-core": "^6.24.1",

    "babel-loader": "^7.0.0",

    "babel-preset-latest": "^6.24.1",

    "css-loader": "^0.28.1",

    "html-loader": "^0.4.5",

    "html-webpack-plugin": "^2.28.0",

    "open-browser-webpack-plugin": "0.0.5",

    "style-loader": "^0.17.0",

    "webpack": "^2.5.0",

    "webpack-dev-server": "^2.4.5"

  }

}

webpack.config.js文件：

var path = require('path');

var webpack = require('webpack');

var htmlWebpackPlugin = require('html-webpack-plugin');

var OpenBrowerPlugin = require('open-browser-webpack-plugin');

module.exports = {

devtool: 'eval-source-map',

entry: './src/app.js',

output: {

path: path.resolve(__dirname, './dist'),

filename: 'js/[name].bundle.js'

},

module: {

loaders: [

{

test: /\.js$/,

loader: 'babel-loader',

exclude: /node_modules/,

query: {

presets: ['latest']

}

}, {

test: /\.css$/,

loader: 'style-loader!css-loader'

}, {

test: /\.html$/,

loader: 'html-loader'

}

]

},

plugins: [

new webpack.optimize.UglifyJsPlugin({

compress: {

// 不显示警告

warnings: false

}

}),

new htmlWebpackPlugin({

title: "This page is generated by template",

filename: 'index.html',

template: 'index.html',

inject: 'body'

}),

new OpenBrowerPlugin({      

url: 'http://localhost:8080'

     })  

]

}

其他原文件的内容，会在后面加载器示例与插件示例中提及部分，完整的demo源代码请通过文章后面会提供文件下载地址进行下载。

加载器示例

   1.JS[X]的加载

    1)在webpack.config.js文件中添加：

    {

test: /\.js$/,

loader: 'babel-loader',

exclude: /node_modules/,

query: {

presets: ['latest']

}

}

    2)安装babel对应的文件

    npm install babel-loader babel-core babel-preset-latest --save-dev

   3) 运行 npm run start

   对应文件源代码：

   babelloader.js

   

function getObj() {

return {

name: 'chenyanwu',

hobby: 'swimming'

}

}

export default getObj;

app.js:

import Obj from './components/js/babelloader.js';

// 初始化定义变量

var variableName = 'hello webpack!';

var obj = new Obj();

var importVariableName = obj.name + " " + obj.hobby;

// 获取index.html文件中ID为app的DIV

var divVariableName = document.getElementById("app"); 

divVariableName.innerHTML = variableName + importVariableName;

   2.CSS的加载

    1)在webpack.config.js文件中添加：

     {

                                test: /\.css$/,

loader: 'style-loader!css-loader'

}

    2)安装babel对应的文件

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

   3) 运行 npm run start

对应文件源代码：

common.css:

html, body {

padding: 0;

margin: 0;

background-color: red;

}

app.js:

import './css/common.css';

import Obj from './components/js/babelloader.js';

// 初始化定义变量

var variableName = 'hello webpack!';

var obj = new Obj();

var importVariableName = obj.name + " " + obj.hobby;

// 获取index.html文件中ID为app的DIV

var divVariableName = document.getElementById("app"); 

divVariableName.innerHTML = variableName + importVariableName;

   3..HTML文件加载

    1)在webpack.config.js文件中添加：

     {

test: /\.html$/,

loader: 'html-loader'

}

    2)安装babel对应的文件

    npm install html-loader --save-dev

   3) 运行 npm run start

对应文件源代码：

layer.html:

<div class="layer">

<div>this is a layer</div>

</div>

layer.js:

import tpl from './layer.html';

function layer() {

return {

name: 'layer',

tpl: tpl

};

}

export default layer;

app.js:

import './css/common.css';

import Obj from './components/js/babelloader.js';

import Layer from './components/layer/layer.js';

// 初始化定义变量

var variableName = 'hello webpack!';

var obj = new Obj();

var importVariableName = obj.name + " " + obj.hobby;

// 获取index.html文件中ID为app的DIV

var divVariableName = document.getElementById("app"); 

divVariableName.innerHTML = variableName + importVariableName;

var layer = new Layer();

var layerDivVarName = document.getElementById("layer"); 

layerDivVarName.innerHTML = layer.tpl;

插件示例

 1.webpack.optimize.UglifyJsPlugin

    1)在webpack.config.js文件中添加：

     new webpack.optimize.UglifyJsPlugin({

compress: {

// 不显示警告

warnings: false

}

}),

    2) 运行 npm run start

使用插件后效果：

   2.html-webpack-plugin

    1)在webpack.config.js文件中添加：

     new htmlWebpackPlugin({

title: "This page is generated by template",

filename: 'index.html',

template: 'index.html',

inject: 'body'

})

    2)安装插件

    npm install html-webpack-plugin --save-dev

   3) 运行 npm run start

使用插件后效果：

   3..open-browser-webpack-plugin

    1)在webpack.config.js文件中添加：

     new OpenBrowerPlugin({      

url: 'http://localhost:8080'

     })  

    2)安装插件

    npm install open-browser-webpack-plugin --save-dev

   3) 运行 npm run start

执行后，直接跳转浏览器指定的url：http://localhost:8080/打开页面，效果图，可以下载源码后，进入webpack-xmind2文件夹，使用npm run start命令查看。

DEMO示例

  针对上面的加载器与插件的安装配置，最终的效果图如下

对应的思维导图和代码下载

导图：

可能效果不是很好，大家可以在这里下载：

思维导图：https://pan.baidu.com/s/1miv7x8W

操作代码：https://pan.baidu.com/s/1hs86Npa

代码下载后，直接进入到webpack-xmind2文件夹，使用npm run start命令后，直接跳转浏览器预览效果。

如果您认为此篇文章不错，请推广，因为你们的支持和鼓励是小编继续写下去的动力。

  

---

  微信订阅号：全栈工程师成长记（qzgcsczj）

目前阶段：

        以个人学习前端技术，来记录如何入门，如何填坑，如何成长，记录过程中可能知识零散，没有整合，如有问题直接添加个人微信号，交流学习；

未来阶段：

        整合个人学习技术，形成书签式的记录分享，为大家填坑，能够尽量少走弯路，成为全栈工程师。

如有兴趣一起学习，一起进步的朋友可以关注微信公众号号，互相交流进步。

---