webpack总结

2,758 阅读1分钟

webpack

images

  • 总结
    • 前端模块化编程打包工具
    • 可以把模块打包成一个文件,提高访问速度,开发速度,优化用户体验
    • 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

devserver的配置选项 功能描述
contentBase 本地服务器所加载的页面所在的目录
port 设置默认监听端口,如果省略,默认为”8080“
inline 设置为true,当源文件改变时会自动刷新页面
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//实时刷新
  } 
}

教程

简书webpack教程

菜鸟webpack教程

webpack中文文档