Talent Coder

1.webpack #

Webpack是一款用户打包前端模块的工具。主要是用来打包在浏览器端使用的javascript的。同时也能转换、捆绑、打包其他的静态资源，包括css、image、font file、template等，并且支持AMD/CMD 优势如下:

webpack 是以commonJS的形式来书写，但对AMD/CMD的支持也很全面,方便旧项目进行代码迁移
能被模块化的不仅仅是JS,还包括各种资源文件
开发便捷，能替代部分gulp的工作，比如打包、混淆压缩、图片转base64等
扩展性强，插件机制完善，特别是支持React热插拔

2.Webpack的安装 #

2.1 初始化项目 #

$ npm init -y

2.2 安装webpack #

2.2.1 全局安装 #

$ npm install -g webpack

2.2.2 本地安装 #


$ npm install webpack --save-dev

2.2.3 打包命令 #

$ webpack 入口文件 出口文件

3.webpack应用 #

webpack 开发环境下编译
webpack -p 产品编译及压缩
webpack -w 开发环境下持续的监听文件变动来进行编译(非常快!)
webpack -d 引入 source maps
webpack --progress 显示构建进度
webpack --display-error-details 显示打包过程中的出错信息(比如 webpack寻找模块的过程)
webpack --profile 输出性能数据，可以看到每一步的耗时

4.在页面中使用加载器 #

4.1 css加载器 #

$ npm install style-loader css-loader less-loader sass-loader --save-dev

4.2 引入less文件 #

require('style!css!less!./style.less');

4.3 引入scss文件 #

require('style!css!less!./style.scss');

5.增加webpack配置文件 #

5.1 创建生产和开发目录 #

$ mkdir src build

5.2 创建依赖文件 #

$ cd src && touch component.js

5.3 创建入口文件 #

$ cd src && touch index.js

5.4 创建首页 #

$ cd build && touch index.html

5.5 引入打包后的js #

<script src="bundle.js"></script>

5.6 创建webpack配置文件 #

$ touch webpack.config.js

5.7 配置webpack.config.js #

var path = require('path');
module.exports = {
    entry: path.resolve(__dirname, 'src/index.js'),//打包的入口文件  String|Object
    output: { //配置打包结果     Object
        path: path.resolve(__dirname, 'build'),//定义输出文件路径
        filename: 'bundle.js' //指定打包文件名称
    }
};

5.8 增加快捷方式 package.json #

"scripts": {
+    "build": "webpack"
}

5.9 执行命令进行编译 #

$ npm run build 相当于执行webpack

6.配置文件中使用loader #

6.1 解析样式文件 #

module: {
       loaders: [
           {
               test: /\.less/,
               loader:'style!css!less'
           }
       ],
},

6.2 解析资源文件 #

6.2.1 安装loader #

$ npm install file-loader url-loader --save-dev

6.2.2 增加对应匹配 #

module: {
       loaders: [
           {
               test: /\.less/,
               loader:'style!css!less'
           },
           + {
           +      test: /\.(woff|woff2|ttf|svg|eot)(\?v=\d+\.\d+\.\d+)?$/,
           +      loader: "url?limit=10000"
           + },
           + {
           +       test: /\.(jpg|png)$/,
           +       loader: "url?limit=8192&name=[name].[ext]"
           +  }
       ],
},

7.配置多入口文件 #

7.1 增加入口文件 #

entry: {
        entry1: './src/component.js',
        entry2: './src/index.js',
},
output:{
        path:'./build/',
        + filename:'[name].js'
},

8.resolve解析 #

8.1 extensions #

指定extension之后可以不用在require或是import的时候加文件扩展名,会依次尝试添加扩展名进行匹配

resolve: {
  extensions: ["", ".js", ".jsx", ".css", ".json"],
}

8.2 alias #

8.2.1 简化引用路径 #

+ var jqueryPath = path.join(__dirname, "./node_modules/jquery/dist/jquery.js");
resolve: {
  extensions: ["", ".js", ".jsx", ".css", ".json"],
  + alias: {
  +            'jquery': jqueryPath
  +        }

}

8.2.2 可设置不查找依赖关系 #

module: {
       loaders: [
           {
               test: /\.less/,
               loader:'style!css!less'
           },
+          {
+                test: /\.(woff|woff2|ttf|svg|eot)(\?v=\d+\.\d+\.\d+)?$/,
+                loader: "url?limit=10000"
+          },
+          {
+                test: /\.(jpg|png)$/,
+                loader: "url?limit=8192&name=[name].[ext]"
+          }
       ],
+     noParse: [jqueryPath]
},

引用jquery

var $ = require('jqeury');
$('#app').html('hello zfpx');

9.安装webpack-dev-server #

webpack-dev-server是一个Web服务器,可以预览。
项目在内存中打包，不是io读写

9.1 全局安装 #

$ npm install webpack-dev-server -g

9.2 本地安装 #

$ npm install webpack-dev-server --save-dev

10.webpack-dev-server参数配置 #

webpack-dev-server - 在 localhost:8080 建立一个 Web 服务器
webpack-dev-server --devtool eval - 为你的代码创建源地址。当有任何报错的时候可以让你更加精确地定位到文件和行号
webpack-dev-server --progress - 显示合并代码进度
webpack-dev-server --colors - 命令行中显示颜色
webpack-dev-server --content-base build - webpack-dev-server服务会默认以当前目录伺服文件，如果设置了content-base的话，服务的根路径则为build目录
webpack-dev-server --inline 可以自动加上dev-server的管理代码，实现热更新
webpack-dev-server --hot 开启代码热替换，可以加上HotModuleReplacementPlugin
webpack-dev-server --port 3000 设置服务端口

11.配置webpack.config.js #

devServer: {
        publicPath: "/static/",//设置在html页面中访问产出文件的路径前缀
        stats: { colors: true }, //显示颜色
        port: 8080,//端口
        contentBase: 'build',//指定静态文件的根目录
}

11.1 修改build/index.html #

<script src="/static/bundle.js"></script>

11.2 修改package.json #

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack"
},

11.3 在命令行下运行 #

$ npm run dev