webpack使用

webpack介绍

webpack是当下最热门的前端资源模块化管理和打包工具。它能够将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。

还能够按需加载的模块进行代码分离，等到实际须要的时候再异步加载。经过loader的转换，任何形式的资源均可以视做模块。好比CommonJS模块,

AMD模块，ES6模块，CSS，图片，JSON，less等

 

1) webpack安装

npm install webpack -g

2) webpack使用

webpack main.js  build.js  

会把基于模块开发的main.js引用的外部模块合并到build.js中。页面上直接引用build.js

3）配置文件

webpack.config.js默认的配置文件，未来在命令行运行的webpack就会自动执行配置文件中的内容

module.exports = {

//入口文件

    entry: './main.js',

    output: {

        //打包输出的目录

         path: './bin',

       filename:'build.js'

    }，

    module:{

         loaders:[{

         test:/\.css$/,

         exclude:/node_modules/,

         loader: 'style-loader !css-loader'//执行顺序从右到左

     }

  ]

 }

}

 

webpack经常使用的loader

1)初始化项目  npm init

2).1下载style-loader 和css-loader

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

使用如上，

 

2).2autoprefixer-loader 自动添加css 前缀

npm install autoprefixer-loader -S

使用： loader: 'style-loader !css-loader !autoprefixer-loader'//执行顺序从右到左

2).3 less

npm install less-loader less -S

使用：loader: 'style-loader !css-loader !autoprefixer-loader !less-loaderl'//执行顺序从右到左

2).4 sass

npm install sass-loader node-sass -S

使用：loader: 'style-loader !css-loader !autoprefixer-loader !sass-loaderl'//执行顺序从右到左

2).5 url-loader 依赖file-loader

npm install url-loader -S

说明： 小于80k的文件，把图片进行base64编码，减小一次http请求。

{

    test: /\.(png|jpg)$/,

    loader: 'url-loader?limit=80000'

}

若是处理字体图标，eot|svg|ttf|woff|tof等

2).6 ES6转ES5

常常用到的语法，

例如： import,  export default,(AMD规范)

mudule.exports （CommonJS规范）

webpack中经常使用的plugin

一、实时打包和浏览器实时刷新

1）npm install webpack-dev-server -S

2) 使用： webpack-dev-server  --inline  --hot  --open  --port  3000

在package.json中配置：

“script”:{

     'dev':'webpack-dev-server  --inline  --hot --open --port 3000'

}

参数说明：

      inline  自动刷新

      hot  热加载

      open 自动在默认浏览器中打开

      port 指定端口

 

指令运行： npm run dev

二、html-webpack-plugin

做用： 在内存中生成index.html,而且自动打包编译的文件

1）npm install html-webpack-plugin -S

2)使用： webpack.config.js中设置

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

plugins:[

    new htmlWebpackPlugin({

       title:'页面标题'，

       filename: 'index.html',

       template:'index.html'

})

]