Webpack入门(详细)

介绍

webpack是近期最火的一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX)、coffee、样式(含less/sass)、图片(压缩)等都作为模块来使用和处理。更具体的学习可以看官方文档https://webpack.js.org/concepts/这里是根据webpack2.0版本的


优点

  1. webpack 是以 commonJS 的形式来书写脚本,但对 AMD/CMD 的支持也很全面,方便旧项目进行代码迁移。
  2. 能被模块化的不仅仅是 JS 了,还有CSS,图片等。
  3. 开发便捷,能替代部分 grunt/gulp 的工作,比如打包、压缩混淆、图片转base64等。
  4. 并且github上有很多项目是基于webpack构建的

安装

  • 前提条件
    在开始前,先要确认你已经安装 Node.js 的最新版本。使用 Node.js 最新的 LTS 版本,是理想的起步。使用旧版本,你可能遇到各种问题,因为它们可能缺少 webpack 功能或缺少相关 package 包。

  • 本地安装,先建立webpack-demo文件,在webpack-demo/app下建立index.js(方便测试),再安装webpack

npm install --save-dev webpack
npm install --save-dev webpack@<version>
  • 全局安装(可以先全局安装,才能直接使用webpack命令,在具体的项目中局部安装)
npm install --global webpack

注意,不推荐全局安装 webpack。这会锁定 webpack 到指定版本,并且在使用不同的 webpack 版本的项目中可能会导致构建失败。


配置

先生成package.json

npm init

再创建
webpack.config.js,
每个项目下都必须配置有一个 webpack.config.js,告诉webpack该干什么。
注意整个配置中我们使用 Node 内置的 path 模块

var path = require('path');

module.exports = {
    // 单页面入口文件
    entry:  './app/index.js',
    /* 多入口  
     entry:['./app/index.js','./app/index1.js'] 
     */
     /* 对象
     entry:{name: './app/index.js',home: './app/index1.js'}
     */
    // 入口文件输出配置
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    }
};

运行

  • webpack 默认是运行webpack.config.js
    命令:
> webpack

最终会在/dist下生成bundle.js文件

  • 如果修改webpack.config.js为mywebpack.config.js,则运行需要修改
webpack --config mywebpack.config.js

再运行webpack即可

  • 如果你在项目中使用了 npm scripts(在package.json中加入),npm 首先会在本地模块中寻找 webpack。这是一个实用的小技巧。
"scripts": {
    "start": "webpack --config mywebpack.config.js"
}

运行npm run start即可

  • 其它参数
$ webpack --config XXX.js   //使用另一份配置文件(比如webpack.config2.js)来打包
 
$ webpack --watch   //监听变动并自动打包
 
$ webpack -p    //压缩混淆脚本,这个非常非常重要!
 
$ webpack -d    //生成map映射文件,告知哪些模块被最终打包到哪里了

$ webpack --progress //显示进度条

$ webpack --color //添加颜色

其中的 -p 是很重要的参数,曾经一个未压缩的 700kb 的文件,压缩后直接降到 180kb(主要是样式这块一句就独占一行脚本,导致未压缩脚本变得很大)。


插件

  • html插件
  • 安装
npm install html-webpack-plugin --save-dev
  • 使用
var path = require('path');
// 引入插件
var htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry: {
        home: './app/index.js',
        work: './app/index1.js'
    },
    output: {
        filename: 'js/[chunkhash]bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    // 插件应用
    plugins: [
        new htmlWebpackPlugin({
            template: 'index.html'
        })
    ]
};
  • 自动打包插件
module.exports = {
  // …
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      name: "commons",
      filename: "commons.js",
      minChunks: 2,
    }),
  ],
// …
};

如果有任意模块加载了两次或更多(通过 minChunks 设置该值),它就会被打包进一个叫 commons.js 的文件里,后面你就可以在客户端缓存这个文件了。


开发

实际上 Webpack 有它自己的开发服务器,通过 devServer 对象可以创建一个服务器:

module.exports = {
  context: __dirname + "/src",
  entry: {
    app: "./app.js",
  },
  output: {
        filename: 'js/[chunkhash]bundle.js',
        path: path.resolve(__dirname, 'dist')
  },
  devServer: {
    contentBase: __dirname + "/src",  
  },
};

运行

// 安装
npm install --save-dev webpack-dev-server
// 运行
webpack-dev-server

如果不能运行,尝试

node_modules/.bin/webpack-dev-server

服务器现在就运行在了 localhost:8080 上。


#Loader
目前为止,我们所讲到的都是关于 JavaScript 代码的使用。从 JavaScript 代码开始是非常重要的,因为 这是 Webpack 唯一使用的语言 。我们可以处理任何文件类型,只要将它们传进 JavaScript 代码中。这个功能用 Loaders 来实现。

一个 loader 可以指向一个像 Sass 的预处理器,或者像 Babel 的编译器。

安装使用步骤

1. install loader
2. module中配置

Babel+ES6

  • 安装
npm install --save-dev babel-loader
npm install babel-core --save-dev
// 安装ES2015支持
npm install babel-preset-es2015 --save-dev
  • 配置
var path = require('path');
var htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry: './src/app.js',
    output: {
        filename: 'js/bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    plugins: [
        new htmlWebpackPlugin({
            template: 'index.html'
        })
    ],
    module: {
        rules: [{
                test: /\.js$/,
                use: ['babel-loader'],
                options: { presets: ['es2015'] }

            }

            // Loaders for other file types can go here
        ],
};

这样就完成了


css-loader

  • install
npm install css-loader style-loader --save-dev
  • 配置
    module: {
        rules: [{
                test: /\.js$/,
                loader: 'babel-loader',
                options: { presets: ['es2015'] }

            }, {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            }

            // Loaders for other file types can go here
        ],

sass-loader

  • 安装。由于需要node-sass配合,也一起安装
npm install sass-loader --save-dev
npm install node-sass --save-dev

如果不成功,可以用淘宝镜像安装

npm install --save node-sass --registry=https://registry.npm.taobao.org --disturl=https://npm.taobao.org/dist --sass-binary-site=http://npm.taobao.org/mirrors/node-sass
  • 配置
{
     test: /\.scss$/,
      use: ['style-loader', 'css-loader', 'sass-loader']
}
  • 常用loader
    1. 处理样式,转成css,如:less-loader, sass-loader

    2. 图片处理,如: url-loader(以base64显示), file-loader,image-webpack-loader(压缩图片)。(url-loader、file-loader)两个都必须用上。否则超过大小限制的图片无法生成到目标文件夹中

    3. 处理js,将es6或更高级的代码转成es5的代码。如: babel-loader,babel-preset-es2015,babel-preset-react

    4. 将js模块暴露到全局,如果expose-loade

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值