Webpack学习笔记

傻瓜版Webpack2.x版本示例项目(Webpack+Vue项目即将推出)

• 下载webpack-demo

• 项目目录

  ├── app│    ├── app.js│    ├── app.scss│    ├── config.json│    ├── demo.js│    ├── demo.tmpl.html│    ├── greeter.js│    ├── icon.png│    ├── index.temp.html│    ├── jquery-1.11.3.min.js│    ├── main.js│    ├── main.scss├── package.json└── webpack.config.js

• 运行
  
  • npm install webpack -g 安装webpack,运行webpack -h查看是否安装成功
  • npm install webpack-dev-server -g 安装webpack-dev-server，可以通过一个socket.io服务实时监听文件的变化并自动刷新页面
  • 安装第三方npm模块npm install
  • 在根目录下运行webpack-dev-server命令开启本地服务
  • 直接打开http://localhost:8080/测试

• package.json

  {  "name": "camera",  "version": "1.0.0",  "description": "",  "main": "index.js",  "scripts": {    "test": "echo \"Error: no test specified\" && exit 1",    "build": "webpack --progress --colors"  },  "author": "vcxiaohan",  "license": "ISC",  "devDependencies": {    "css-loader": "^0.26.4",    "extract-text-webpack-plugin": "^2.1.0",    "file-loader": "^0.10.1",    "html-webpack-plugin": "^2.28.0",    "json-loader": "^0.5.4",    "node-sass": "^4.5.0",    "sass-loader": "^6.0.3",    "style-loader": "^0.13.2",    "url-loader": "^0.5.8",    "webpack": "^2.2.1"  }}

• webpack.config.js

  var webpack = require('webpack');    var HtmlWebpackPlugin = require('html-webpack-plugin');    var ExtractTextPlugin = require('extract-text-webpack-plugin'); // 必须配合html-webpack-plugin才能生效    module.exports = {        devtool: 'source-map',        //配置生成Source Maps，以便报错时能定位到具体的行列        entry: { // 入口文件配置项            main: __dirname + "/app/main.js",            // js文件标识，传入HtmlWebpackPlugin的chunks参数位置，以便生成多个页面时能引用不同的js文件            demo: __dirname + "/app/demo.js",            //         },        output: { // 输出文件配置项            path: __dirname + "/public",            // 打包后的文件存放的地方            filename: "[name].js" // 打包后输出文件的文件名        },        module: { // 在配置文件里添加JSON loader            loaders: [{                test: /\.json$/,                loader: "json-loader" // webpack2.x 版本不能省略loader后缀            }, {                test: /\.scss$/,                loader: ExtractTextPlugin.extract({ // extract-text-webpack-plugin2.x 版本写法                    fallback: 'style-loader',                    use: 'css-loader!sass-loader'                })            }, {                test: /\.(png|jpg)$/,                loader: 'url-loader?limit=10&name=[hash].[ext]' // url-loader需要配合file-loader使用才能生效，否则读取大图片的时候会报错            }, ]        },        plugins: [ // 插件配置项        new HtmlWebpackPlugin({ // 生成多页面            template: __dirname + "/app/index.tmpl.html",            // 使用模板            filename: 'index.html',            // 输出的html文件名            chunks: ['main', 'common'],            // 引用的js文件标识，必须要引入CommonsChunkPlugin独立出来的common文件        }), new HtmlWebpackPlugin({ // 生成多页面            template: __dirname + "/app/demo.tmpl.html",            filename: 'demo.html',            chunks: ['demo'],        }), new webpack.BannerPlugin("by vcxiaohan"),        //new webpack.optimize.UglifyJsPlugin(),// 压缩js        new ExtractTextPlugin("[name].css"), // 提取css样式为单独的文件        new webpack.optimize.CommonsChunkPlugin({ // 把main文件标识的公共部分提取出来独立成common文件            name: 'common',            chunks: ['main']        }), ],        devServer: { // 本地服务配置项            contentBase: "./public",            // 自定义本地服务器基本目录            inline: true,            // 实时刷新            proxy: { // 代理                '/': {                    target: 'http://v4.faqrobot.net',                    changeOrigin: true // 解决跨域代理                }            }        }    }

快速命令

• npm install webpack -g 安装webpack,运行webpack -h查看是否安装成功
• npm install webpack -save-dev 安装webpack到项目根目录
• npm install css-loader style-loader –save-dev 安装css-loader来读取css，安装style-loader把读取到的css它插入到页面
• npm install json-loader –save-dev 安装json-loader来读取json
• npm install sass-loader –save-dev 安装sass-loader来预处理css
• webpack –watch 启动监听模式
• npm install webpack-dev-server -g 可以通过一个socket.io服务实时监听文件的变化并自动刷新页面
• npm install extract-text-webpack-plugin –save-dev 安装提取文本插件，分离CSS文件
• npm install html-webpack-plugin –save-dev 安装生成页面插件
• npm install url-loader -save-dev 将样式中引用到的图片转为模块来处理
• npm install vue -save 安装vue.js
• npm install vue-loader –save-dev 安装vue读取插件，解析vue文件中的每个语言块，然后传输到其它的loaders
• npm install vue-template-compiler –save-dev 用于将Vue 2.x模板预编译为render函数，以避免运行时编译开销和CSP限制

细节整理

• extract-text-webpack-plugin需要配合html-webpack-plugin使用才能生效
• url-loader需要配合file-loader使用才能生效，否则读取大图片的时候会报错
• CommonsChunkPlugin提取出来的文件，必须要在HtmlWebpackPlugin里面引用，否则报错webpackJsonp is not defined？
• Babel其实是几个模块化的包，其核心功能位于称为babel-core的npm包中，不过webpack把它们整合在一起使用，但是对于每一个你需要的功能或拓展，你都需要安装单独的包（用得最多的是解析Es6的babel-preset-es2015包和解析JSX的babel-preset-react包）。

参考文档

• 入门Webpack，看这篇就够了
• webpack官方文档
• Webpack傻瓜式指南（一）
• Webpack傻瓜指南（二）开发和部署技巧
• 用webpack-dev-server开发时代理，决解开发时跨域问题
• 用webpack的CommonsChunkPlugin提取公共代码的3种方式
• webpackJsonp is not defined？
• Vue + Webpack + Vue-loader 系列教程（1）功能介绍篇
• devDependencies和dependencies的区别
• babel的polyfill和runtime的区别
• webpack 配合babel 将es6转成es5 超简单实例
• Babel 全家桶
• webpack之babel插件困惑解疑
• Webpack2 升级指南和特性摘要
• html-webpack-plugin用法全解
• html-webpack-plugin 中使用 title选项设置模版中的值无效
• webpack多页应用架构系列（七）：开发环境、生产环境傻傻分不清楚？