webpack学习资料

作者: 九泰修行 | 来源:发表于2017-02-15 19:45 被阅读75次

webpack

安装

npm install webpack -g

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

简单一个小案例：

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script src="folel.js"></script>
</body>
</html>

main.js:

document.write("<h1>Hello World!</h1>")

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

安装插件
webpack.config中匹配css文件
用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'] //后缀名自动补全
      }
  };

网友评论

本文标题：webpack学习资料

本文链接：https://www.haomeiwen.com/subject/fvaqwttx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

webpack学习资料

webpack

安装

编译操作：

多文件编译

打包css

打包js

本地服务器

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

我们看一个较为完整的demo

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

webpack学习资料

webpack

安装

编译操作：

多文件编译

打包css

打包js

本地服务器

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

我们看一个较为完整的demo

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

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