weback学习笔记

      weback可以把各种资源，例如JS（含JSX）、coffee、样式（含less/sass）、图片等都作为模块来使用和处理。同时支持amd cmd CommonJS语法。同时可以和gulp一块使用。

一.新建工程目录

１．npm init

２．webpack.config.js

目录结构如下

project

 + webpack.develop.config.js

 + src

   - index.html

   - index.js

+ publish

  - index.html

 

二.安装webpack

npm install webpack -g

npm install webpack --save-dev

三.运行

1.一般通过配置文件的形式来运行webpack（写入webpack.config.js）

webpack --config webpack.develop.config.js(运行配置文件默认为webpack.config.js)

var path = require('path');

module.exports = {
    entry:path.resolve(__dirname,'src/index.js'),
    output: {
        path: path.resolve(__dirname, 'publish'),
        filename: 'bundle.js',
    },
    module: {
        loaders: [
        ]
    }
}

打包成功如下

　　

2.webpack-dev-server使用 此插件可以监视代码变化自动编译代码

（1）执行完此命令生成的js文件存在于内存中，实际工程中没有，但是在html文件中引用好用。

（2）改完代码webpack-dev-server自动编译新的代码刷新浏览器可见。

（3）如果想也自动刷新页面（需要修改配置文件如下）

var path = require('path');

module.exports = {
    // 修改enrty为如下三行，在改变代码后 浏览器自动刷新
    entry:[
        'webpack/hot/dev-server',
        'webpack-dev-server/client?http://localhost:8080',
        path.resolve(__dirname,'src/index.js')
    ],
    output: {
        path: path.resolve(__dirname, 'publish'),
        filename: 'bundle.js',
    },
    module: {
        loaders: [
            // { test: /.css$/, loader: "style!css" }
        ]
    }
}

　四.常用加载器

1.babel-loader（es6转es5） 需要安装的包如下

npm install babel-loader --save-dev

npm install babel-core babel-preset-es2015 babel-preset-react --save-dev

修改配置文件中的module 就可以编辑es6语法和jsx语法

 module: {
        loaders: [
            {
                test: /.jsx?$/, // 正则匹配js和jsx
                loader: 'babel',
                query: {
                    presets: ['es2015', 'react']
                }
            },
            {
                test: /.css$/, // Only .css files
                loader: 'style!css' // 同时用两个，中间用感叹号隔开loaders
            },
            {
                test: /.scss$/,
                loader: 'style!css!sass'
            }
        ]
    }

 2. url-loader (图片处理)(不要和file-load一块使用，可能会冲突)

npm install url-loader --save-dev

{

      test: /.(png|jpg)$/,//处理png和jpg的图片

      loader: 'url?limit=100000'//限制为100k（如果小于100k会将图片打包进js文件）

 }

3.css-loader 和 style-loader

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

{

      test: /.css$/, // Only .css files

       loader: 'style!css' // Run both loaders

}

五.常用插件

1.extract-text-webpack-plugin 用于在js中抽取css文件

2.html-webpack-plugin 创建html文件到publish

六。

webpack // 基本的启动webpack方法

 webpack -w // 提供watch方法

 webpack -p // 对文件进行压缩

webpack -d // 提供source map，方便调试。

webpack --progress 显示编译进度

webpack --colors 显示静态资源的颜色

webpack --display-chunks 展示编译后的分块

webpack --display-reasons 显示更多引用模块原因

webapck --display-error-details 显示更多报错信息

webpack-dev-server--hot只要在启动webpack开发服务器时开启--hot参数，就可以使用react-hot-loader（使用 react 编写代码时，能让修改的部分自动刷新）

webpack-dev-server --content-base build 自动找build下面的静态文件
webpack --profile 输出性能数据，可以看到每一步的耗时