webpack

• 总结
  • 前端模块化编程打包工具
  • 可以把模块打包成一个文件，提高访问速度，开发速度，优化用户体验
  • module.exports 导出
  • require() 导入
• 安装
  • windows： npm install webpack -g
  • mac： sudo npm install webpack -g
• 使用
  • 命令 webpack test01.js bundle.js
  • 将test01.js文件内容打包到 bundle.js
• 使用配置文件打包

module.exports = {    devtool:"eval-source-map",//开启调试    entry: "./index.js",//打包index.js文件    output: {        path: __dirname,//输出文件路径        filename: "bundle.js"//输出文件名字    },    module: {        loaders: [//使用webpack loaders模块         	//正则表达式以css结尾 //打包css的模块             { test: /\.css$/, loader: "style-loader!css-loader" }        ]    }};复制代码

webpack 核心模块 loader

Loaders鼎鼎大名的Loaders登场了！Loaders是webpack提供的最激动人心的功能之一了。通过使用不同的loader，webpack有能力调用外部的脚本或工具，实现对不同格式的文件的处理，比如说分析转换scss为css，或者把下一代的JS文件（ES6，ES7)转换为现代浏览器兼容的JS文件，对React的开发而言，合适的Loaders可以把React的中用到的JSX文件转换为JS文件。复制代码

css-loader style-loader 打包css模块

安装：npm install css-loader style-loader

引用：

require("!style-loader!css-loader!./style.css");

打包：webpack test.js bundle.js

或

require("./style.css");

打包：webpack test.js bundle.js --module-bind 'css=style-loader!css-loader'

插件

例子：安装内置的 BannerPlugin

插件，用于在文件头部输出一些注释信息。

安装：npm install webpack --save-dev

var webpack=require('webpack'); module.exports = {    entry: "./test.js",    output: {        path: __dirname,        filename: "bundle.js"    },    module: {        loaders: [            { test: /\.css$/, loader: "style-loader!css-loader" }        ]    },    plugins:[    new webpack.BannerPlugin('内置的 BannerPlugin 插件，用于在文件头部输出一些注释信息。')    ]};复制代码

开发环境

监听代码更新

安装 npm install webpack-dev-server -g

启动服务器 webpack-dev-server --progress --colors

访问网站 http://localhost:8080

module.exports = {  devtool: 'eval-source-map',  entry:  __dirname + "/app/main.js",  output: {    path: __dirname + "/public",    filename: "bundle.js"  },  devServer: {    contentBase: "./public",//本地服务器所加载的页面所在的目录    historyApiFallback: true,//不跳转    inline: true//实时刷新  } }复制代码

教程