webpack 学习笔记

基于 node 环境, 必须确保 node 已经安装好了。
验证: node -v
npm -v

一些小命令积累: {
    $ npm install -g cnpm --registry=https://registry.npm.taobao.org (cnpm代替npm)
    cls: 清除(cmd中的命令)
    clear: 清除(git中的命令)
}

安装 webpack:

1. 安装 webpack 命令环境

终端: cnpm install webpack -g
验证: webpack --version

2. package.json 工程文件(需要依赖模块,库描述,版本,作者...)

终端: npm init
验证: 生成 package.json 文件

3. 安装本地 webpack

终端: cnpm install webpack -D 解释: (-D 等价于 --save-dev, 会配置到 webpack.json 的 devDependencies 属性中; --save, 会配置到 webpack.json 的 dependencies 属性中)
验证: 本地文件下多了个 node_modules 目录

`````````````````````````````````````````````````````````````
webpack 使用:

1) webpack 第一个小例子:

准备:
index.html 首页文件 (编写页面, 载入bundle.js,它是通过webpack编译打包的)
entry.js 入口文件 (编写js源码)

说明: entry.js的源码通过编译打包后,被index.html引入。

怎么编译 entry.js 文件 ?
终端: webpack entry.js bundle.js (必须当前目录下)

 

2) webpack 第二个小例子(自动解决依赖commonJs规范):

准备:
exports1.js 模块文件,然后被 entry.js 引入,然后 webpack entry.js bundle.js 编译打包成 bundle.js, 遵循commonJs规范。

 

3) webpack 默认只支持 javascript 文件模块化

要转化css或者图片等其他,需要用加载器(loader),
loader类似一种转化器, 他可以把一个东西转成另一个东西

载入css文件:
准备:
style.css 被entry.js引入,然后编译打包, 但是不能直接编译css文件。

需要安装2个模块:
style-loader
css-loader
终端: cnpm install style-loader css-loader -D
使用: require('style!css!./style.css')或者require('style-loader!css-loader!./style.css'); 说明: 在webpack中多个loader加载使用 ! 连接

4) 配置 webpack.config.js 使用很方便 (每次编译打包都使用 webpack entry.js bundle.js 麻烦)

作用: 配置一些 webpack 需要的入口, 出口, loader

webpack 终端一些命令:
webpack 开发环境下编译(打包)
webpack -p 生产环境下编译(压缩)
webpack -w watch监听文件改动,自动编译(速度快,只要在浏览器点击刷新,即可刷新了,不需要webpack一下)
webpack -d 开启(生成)source maps(对我来说是必须的,我要调试,哈哈)

webpack -dwp 一次性都开启(就这么一个命令就够了)

但是webpack.config.js中配置了 devtool: 'source-map', 所以以后直接用 webpack -wp 即可

5) Es6 -> babel转化

babel使用:
终端: cnpm install babel-loader babel-core babel-preset-es2015 -D

安装完,不一定可以使用,需要配置如下:

配置babel预设:
1). webpack.config.js
babel: {
    "presets": ["es2015"]
} // 不推荐
2). babelrc配置 通过 touch .babelrc 生成
{
    "presets": ['es2015']
}

 

`````````````````````````````````````````````````````````````

webpack.config.js 配置

module.exports = {
    entry: './js/entry.js',
    output: {
        filename: 'js/bundle.js'
    },
    devtool: 'source-map',
    module: {
        loaders: [{
            test: /\.css$/,
            loader: 'style!css'
        }, {
            test: /\.js$/,
            loader: 'babel',
            exclude: /node_modules/
       }]
    }
};