webpack

1、webpack介绍:

webpack是一个现代的JavaScript应用模块打包器（module bundler），它能把各种资源，例如JS（含JSX）、coffee、样式（less/sass）、图片等都作为模块来处理和使用。

2、为什要使用WebPack

今的很多网页其实可以看做是功能丰富的应用，它们拥有着复杂的JavaScript代码和一大堆依赖包。为了简化开发的复杂度，前端社区涌现出了很多好的实践方法

a:模块化，让我们可以把复杂的程序细化为小的文件;

b:类似于TypeScript这种在JavaScript基础上拓展的开发语言：使我们能够实现目前版本的JavaScript不能直接使用的特性，并且之后还能能装换为JavaScript文件使浏览器可以识别；

c:scss，less等CSS预处理器

.........

这些改进确实大大的提高了我们的开发效率，但是利用它们开发的文件往往需要进行额外的处理才能让浏览器识别,而手动处理又是非常反锁的，这就为WebPack类的工具的出现提供了需求。

3.开始使用Webpack

 检查是否安装npm       npm -v  

//全局安装
npm install -g webpack
//安装到你的项目目录
npm install --save-dev webpack

当然如果常规项目还是把依赖写入 package.json 包去更人性化：
首先我们要创建个项目 app
$ npm  mkdir app
在终端中使用npm init命令可以自动创建这个package.json文件  
$ npm init
$ npm install webpack --save-dev    

配置文件webpack.config.js

module.exports = {
entry: './main.js', //入口文件

output: { //输出
filename: 'bundle.js'
},
module: { //loader的解析
loaders: [
{ test: /\.css$/, loader: 'style-loader!css-loader' }, //匹配所有以.css结尾的文件 用style-loader!css-loader打包

{ test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192' },  //匹配所有以png.jpg结尾的图片limit ，它的左右是如果图片的大小，小于8192bytes就以Data URL的形式引入图片，大于就用图片地址引用。
]
}，

plugins: [        //ugligy-js是一个用npm安装的JavaScript代码压工具

        new webpack.optimize.UglifyJsPlugin({                             

            compress: {

                warnings: false

            }

        })

    ]

};

 

main.js配置

require('./app.css'); //引进css
document.write("<h2>Hello Webpack!</h2>");

1 2 3 4 5 6 7

var img1 = document.createElement("img"); img1.src = require("./small.png"); document.body.appendChild(img1);   var img2 = document.createElement("img"); img2.src = require("./big.png"); document.body.appendChild(img2);

webpack配置多路口文件

module.exports = {
entry: {
bundle1: './main1.js',
bundle2: './main2.js'
},
output: { //输出
filename: '[name].js'
}
};

用npm 安装  css-loader  和style-loader

$ npm install style-loader --save-dev

$ npm install css-loader --save-dev

$ cnpm install url-loader --save-dev    //img loader  加载图片

 $ cnpm install  uglify-js g

安装测试服务器$ webpack  

$ npm live-server

启动服务器

$ live-server

终止服务器

ctrl+c y

安装webpack-dev-server   本地服务器

 npm install --save-dev webpack-dev-server

 

 

5 16

module.exports = {     entry: __dirname + '/main.js',     output: {         path: __dirname + '/',         filename: 'bundle.js'     },     devServer: {         contentBase: './', //本地服务器所加载的页面所在的目录         host: '192.168.1.158', //本地IP地址         colors: true, //终端输出结果为彩色         historyApiFallback: true, //不跳转         inline: true, //实时刷新         port: '3333' //端口号       } }