webpack

这几天学习webpack，脑袋乱乱的。感觉需要整个的梳理一遍。以后有什么不懂的时候可以回过头来看看。

webpack准备

首先我们需要新建一个目录，开始我们的webpack之旅~

mkdir webpack-demo

ok,找到文档撸起袖子开敲！等一等，我们需要先做一些准备工作

npm init     目录下新增一个package.json文件

我们找到webpack的github（因为只有在这上面才有最新的3.0版）

npm install --save-dev webpack （本地安装）

配置好整个环境，磨刀不误砍柴工

git init
git add .
git commit -v

为了更加方便的了解npm，我们可以做一些准备

运行 npm config set loglevel http     让你知道 npm 发的每一个请求
运行 npm config set progress false    关闭那个进度条

为了让你的安装速度变快

运行 npm config set registry https://registry.npm.taobao.org/

这会让你在运行 npm adduser 的时候出问题，想要恢复成原样，只需要 npm config delete registry 即可

webpack安装

没啥说的，打开文档，无脑敲

npm i -g webpack     正式安装 webpack (全局安装)

如果报错说有权限问题，就是用 sudo npm i -g webpack
辣鸡 window 请用 Git Bash

验证安装成功
运行webpack --help会看到以下信息

webpack 1.14.0
Usage: https://webpack.github.io/docs/cli.html
...
...
--display-cached-assets
--display-reasons, --verbose, -v

我们就完成了webpack的配置安装工作

webpack创建页面

github上点开的Get Started

project

  webpack-demo
  |- package.json
  |- /dist
    |- index.html
  |- /src
    |- index.js

npm install --save lodash

src/index.js

import _ from 'lodash';
//"npm jquery"     import $ from 'jquery' 

function component() {

  var element = document.createElement('div');
//var $div = $('<div/>')

  element.innerHTML = _.join(['Hello', 'webpack'], ' ');
//$div.html(_.join(['Hello', 'webpack'], ' ') )

  return element;
//return $div
}

document.body.appendChild(component());
//$(document.body).append(component())

index.html

<html>
  <head>
    <title>Getting Started</title>
    <script src="https://unpkg.com/lodash@4.16.6"></script>
  </head>
  <body>
    <script src="bundle.js"></script>
  </body>
</html>

let's run webpack

./node_modules/.bin/webpack src/index.js dist/bundle.js

package.json

{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
+   "build": "webpack",           webpack
+   "watch": "webpack --watch"    随时监控
  },

webpack集合

npm run build

npm i -S jquery

我们要加载js（webpack.config.js）例子：

var path = require('path');
var HtmlwebpackPlugin = require('html-webpack-plugin');
var OpenBrowserPlugin = require('open-browser-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle-[hash].js',
    path: path.resolve(__dirname, 'dist')
  },
devServer: {
  contentBase: path.join(__dirname, "dist"),
  compress: true,
  port: 9000
},
plugins: [
    new HtmlwebpackPlugin({
      title: 'Webpack-demos',
      filename: 'index.html'
    }),
    new OpenBrowserPlugin({
      url: 'http://localhost:9000'
    })
  ],
module: {
    loaders:[
      { test: /\.less/, 
          loaders: ['style-loader',
                'css-loader',
                'autoprefixer-loader',
                'less-loader'

          ] },
      { test: /\.(png|jpg)$/, 
    loaders: [
            'file-loader?hash=sha512&digest=hex&name=[hash].[ext]',
            'image-webpack-loader'
        ] },
    ]
  }
};

运行 webpack，出错：

ERROR in Entry module not found: Error: 
Cannot resolve module 'xxx-loaderr' in /tmp/webpack-demo

上面的提示说没有 'xxx-loader' ，我们就直接安装这个东西

npm i -D xxx-loader

然后继续npm run bulid,可能会继续缺少什么，我们继续安装就行