webpack项目打包(从安装到使用)

1. 准备工作

(1). 下载nodeJS nodeJS官网
(2). 下载Git Git官网


注:下载完Node.js后根据安装提示一步步安装即可,node.js有一个叫npm的包管理器,webpack模块可被npm包管理器安装


安装webpack

   $npm install -g webpack   //全局安装webpack命令
2. 在项目中使用webpack
   $npm init    //使用此命令在项目根目录下生成package.json文件
package.json案例

注: 安装时后缀 --save 和 --save-dev区别

  • --save会把依赖包名称添加到package.json文件dependencies键(运行时依赖,即大家发布后还需要依赖的模块,否则运行不了,如jquery、angular等)下;
  • --save-dev是添加到package.json文件devDependencies键(开发时依赖,即发布后用不到的模块)下;
3. 安装webpack到项目中
   $npm install --save-dev webpack    //将webpack加入到pageage.json配置文件中

注:此时webpack依赖模块已经配置到大家项目中了,并且项目目录中新增一个node_modules文件夹,打开文件夹可看到刚安装的webpack模块。

4. 开发工具

webpack-dev-server模块能快速配置一个本地服务器,并且当每次保存修改过的代码后,测试服务器将马上自动刷新页面,省去了每次都要手动打包编译代码和刷新页面的麻烦。

5.配置webpack.config.js文件
  • 使用命令行配置
    $ webpack //当在命令行输入webpack时,默认使用webpack.config.js文件配置

  • 可自定义webpack配置文件,写法如下
    $webpack --config webpack.config_test.js
    //--config选项告诉webpack使用webpack.config_test.js作为配置文件

  • 配置文件结构
    module.exports = {
    //这里填写配置项
    }
    //从以上代码可看出,webpack.config.js文件输出了配置对象

  • 使用node.js API配置 (需通过参数来传递配置对象)
    webpack({
    //配置项在这里填写
    }, function(){
    //回调函数
    })

  • 更复杂的配置项
    $webpack app.js app.bundle.js //将app.js编译成app.bundle.js文件

注:使用命令行缺点是大家每次要编译编写代码时,都要写这么长的命令,如果设置妥当的webpack.config.js配置文件,则webpack可以监听文件改变,自动的实行编译打包命令

   $webpack -w     //监听文件改变,自动编译
  • 配置文件怎么写?


    webpack.config.js案例

(1). context——上下文选项用来决定根目录(即绝对路径)的入口文件


(2). entry——打包文件的入口点(3种方式)

   //1).字符串,此字符串将在开始编译时被加载
   entry: "./app.js"      

   //2).数组,此数组中所有模块在编译启动时都将被加载,对后一个数组元素将被输出
   entry: ["./entry1.js", "./entry2.js"]      

   //3).对象,相当创建了多个入口绑定
        对象的"键"名可在output中使用name获取到,"值"可以是一个字符串也可以是一个数组
   {
      entry:{
           page1: "./page1.js",
           page2: ["./entry1.js","./entry2.js"]
      },
      output:{
          filename: "[name].bundle.js",
          chunkFilename: "[id].bundle.js"
      }
  }        

(3).output——告诉webpack如何编译文件到硬盘中
注:虽然entry中可以使用一个对象传入多个入口点文件,但是只能给output设置一个配置项

output.path:告诉webpack要把编译后的文件输出到硬盘的什么位置上,而filename被用来确保输在这个目录中的文件是独一无二的

output.path单/多入口写法

output.publicPath:用来指定输出文件的公共Url地址,当大家在浏览器浏览时需配置它

output.publicPath写法

以上是webpack最长用的配置项,下面是更高级的配置,比如使用ES6(ES2015)语法需配置babel-loader,在js中引入css样式文件如style-loader、css-loader等,开发React应用需配置react加载器等等。

下载Loaders加载器

下面是开发基于react的webapp时需配置的项。
首先用npm下载这些模块

   //下载babel-loader模块
   $ npm install --save-dev babel-loader
   //下载babel-preset-es2015,这样确保babel能解析ES6的最新特性
   $ npm install --save-dev babel-preset-es2015
   //下载react模块
   $ npm install -save-dev react
   //下载babel-preset-react,babel才能解析react的语法特性
   $ npm install --save-dev babel-preset-react

Babel是一个转换编译器,它能将ES6转换成可在浏览器中运行的代码。Babel是所有ES6转换编译器中与ES6规范兼容度最高的,甚至超过了GOOGLE创建已久的Traceur编译器。Babel允许开发者使用ES6所有新特性,而且不会影响与老版本浏览器的兼容性。此外,它还支撑许多不同的构建测试系统,使开发者很容易将它集成到自己的工具链中。

在webpack.config.js中配置加载器loaders

   module: {
      loaders: [
           {
                test: /\.jsx$/, 
                loader: 'babel-loader', 
                query:{
                      presets:['es2015','react']
                }
           }
      ]
   }

推荐阅读更多精彩内容