webpack学习资料

webpack

安装

npm install webpack -g

我们还可以直接安装到项目的依赖里，就是写入package.json
npm init
npm install webpack --save-dev

简单一个小案例：

在一个文件夹下新建index.html,main.js以及webpack.config.js文件
index.html:

main.js:

document.write("
Hello World!
")

webpack.config.js:

module.exports = {
    entry:"./main.js",
    output:{
        filename:'./folel.js'
    }
}

编译操作：

cmd在当前文件夹下输入webpack

多文件编译

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

两个文件对应编译，main1.js编译成bundle1.js,main2.js编译成bundle2.js,
[name]相当于是一个变量获取entry的对象中的keyname,所以我们把入口文件的属性名写成转换后的文件名；

打包css

loader加载器
npm init
npm install style-loader --save-dev
npm install css-loader --save-dev

1. 安装插件
2. webpack.config中匹配css文件
3. 用loader进行打包

在js文件中引用css文件

require('./app.css')

在配置文件中使用

module.exports={
    entry:'./main.js',
    output:{
        filename:'bundle.js'
    },
    module:{
        loaders:[
            {test:/\.css$/,loader:'style-loader!css-loader'}
        ]
    }
}

在module对象中，使用loaders,他是一个数组，里面可以有多个对象；

打包js

npm install uglify-js -g

var webpack = require('webpack')
module.exports={
    entry:__dirname + '/main.js',
    output:{
        path:__dirname+'/',
        filename:'bundle.js'
    },
    plugins:[
        new webpack.optimize.UglifyJsPlugin({
            compress:{
                warnings:false
            }
        })
    ]
}

__dirname是nodejs中指的是项目的根目录

本地服务器

第一步：
npm install --save-dev webpack-dev-server
或
npm install -g webpack-dev-server

第二步：在工程目录下操作cmd：

webpack-dev-server --progress --colors

如果启动成功你会看到：

D:\MyPro\webpack\05demo>webpack-dev-server --progress --color
 10% building modules 1/1 modules 0 active
Project is running at http://localhost:8080/
webpack output is served from /
Hash: 2843bb12d87ec572f21b
Version: webpack 2.2.1
Time: 2260ms
    Asset    Size  Chunks                    Chunk Names
bundle.js  324 kB       0  [emitted]  [big]  main
chunk    {0} bundle.js (main) 310 kB [entry] [rendered]
   [35] ./entry.js 94 bytes {0} [built]
   [36] (webpack)-dev-server/client?http://localhost:8080 4.9 kB {0} [built]
   [37] ./content.js 38 bytes {0} [built]
   [38] ./~/ansi-html/index.js 4.26 kB {0} [built]
   [39] ./~/ansi-regex/index.js 135 bytes {0} [built]
   [78] ./~/strip-ansi/index.js 161 bytes {0} [built]
   [80] ./~/url/url.js 23.3 kB {0} [built]
   [81] ./~/url/util.js 314 bytes {0} [built]
   [82] (webpack)-dev-server/client/overlay.js 3.59 kB {0} [built]
   [83] (webpack)-dev-server/client/socket.js 856 bytes {0} [built]
   [85] (webpack)/hot/emitter.js 77 bytes {0} [built]
   [86] ../~/css-loader!./app.css 233 bytes {0} [built]
   [88] ../~/style-loader/addStyles.js 7.15 kB {0} [built]
   [89] ./app.css 901 bytes {0} [built]
   [90] multi (webpack)-dev-server/client?http://localhost:8080 ./entry.js 40 bytes {0} [built]
     + 76 hidden modules
webpack: Compiled successfully.

这样在http://localhost:8080/下更新文件保存后会实时更新

直接放一个app.js启动文件 用node app启动

我们看一个较为完整的demo

var webpack = require('webpack');
var commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common.js');
module.exports = {
    //插件项
    plugins: [commonsPlugin],
    //页面入口文件配置
    entry: {
        index : './src/js/page/index.js'
    },
    //入口文件输出配置
    output: {
        path: 'dist/js/page',
        filename: '[name].js'
    },
    module: {
        //加载器配置
        loaders: [
            { test: /\.css$/, loader: 'style-loader!css-loader' },
            { test: /\.js$/, loader: 'jsx-loader?harmony' },
            { test: /\.scss$/, loader: 'style!css!sass?sourceMap'},
            { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}
        ]
    },
    //其它解决方案配置
    resolve: {
        root: 'E:/github/flux-example/src', //绝对路径
        extensions: ['', '.js', '.json', '.scss'],
        alias: {
            AppStore : 'js/stores/AppStores.js',
            ActionType : 'js/actions/ActionType.js',
            AppAction : 'js/actions/AppAction.js'
        }
    }
};

ES6语法转译为ES5：

安装 babel-loader：
npm install babel-loader --save-dev
安装转码规则：
npm install babel-preset-es2015 --save-dev

ES7不同阶段语法提案的转码规则（共有4个阶段），选装一个
# npm install --save-dev babel-preset-stage-0
# npm install --save-dev babel-preset-stage-1
# npm install --save-dev babel-preset-stage-2
# npm install --save-dev babel-preset-stage-3

参考格式：

{
    test: /\.js$/,
    loader: 'babel?presets[]=es2015,presets[]=stage-0'
}

编译css

安装css-loader：  
# npm install css-loader  --save-dev
安装style-loader  
# npm install style-loader  --save-dev
参考格式：
{
    test: /\.css$/,
    loaders: ['style', 'css', 'autoprefixer']
}

编译less

# npm install less --save-dev
安装less-loader： 
# npm install less-loader --save-dev
参考格式：
{
    test: /\.less/,
    loaders: ['style', 'css', 'autoprefixer', 'less'],
}

使用autoprefixer自动补上浏览器兼容

# npm install autoprefixer-loader --save-dev
参考格式：
{
    test: /\.css$/,
    loaders: ['style', 'css', 'autoprefixer']
}, {
    test: /\.less/,
    loaders: ['style', 'css', 'autoprefixer', 'less'],
}

编译文件

    安装file-loader： 
    # npm install file-loader --save-dev
    参考格式：
    {
        test: /\.(eot|woff|svg|ttf|woff2|gif)(\?|$)/,
        loader: 'file-loader?name=[hash].[ext]'
    }

编译图片

  # npm install url-loader --save-dev
  参考格式：
  {
  test: /\.(png|jpg)$/,
  loader: 'url?limit=1200&name=[hash].[ext]'
  }

编译JSX

  # npm install jsx-loader --save-dev
  # npm install babel-preset-react --save-dev
  参考格式：
  {
  test: /\.jsx$/,
  loaders: ['jsx', 'babel?presets[]=es2015,presets[]=stage-0,presets[]=react']
  }

示例源码

在项目目录下，新建一个webpack.config.js文件，把下面代码复制进去，然后在新建一个app.js和index.js文件，写上console.log('你好世界');
执行命令：webpack 然后找到build目录就看到编译后的文件了

  var webpack = require('webpack');
  
  module.exports = {
      entry: {
          app: './app', //编译的入口文件
          index: './index', //编译的入口文件
      },
      output: {
          publicPath: '/build/', //服务器根路径
          path: './build', //编译到当前目录
          filename: '[name].js' //编译后的文件名字
      },
      module: {
          loaders: [{
                  test: /\.js$/,
                  loader: 'babel?presets=es2015'
              }, {
                  test: /\.css$/,
                  loaders: ['style', 'css', 'autoprefixer']
              }, {
                  test: /\.less/,
                  loaders: ['style', 'css', 'autoprefixer', 'less'],
              }, {
                  test: /\.(eot|woff|svg|ttf|woff2|gif)(\?|$)/,
                  loader: 'file-loader?name=[hash].[ext]'
              }, {
                  test: /\.(png|jpg)$/,
                  loader: 'url?limit=1200&name=[hash].[ext]' //注意后面那个limit的参数，当你图片大小小于这个限制的时候，会自动启用base64编码图片
              }
          ]
      },
      plugins: [
              new webpack.optimize.CommonsChunkPlugin('common.js') //将公用模块，打包进common.js
      ],
      resolve: {
          extensions: ['', '.js', '.jsx'] //后缀名自动补全
      }
  };