小白上学のWebpack零基础学习指导

时间 2019-12-05

标签上学 webpack 零基础学习指导繁體版

原文原文链接

前言：css

本套教程是零基础学打包工具webpack；
后面会结合gulp+webpack搞定全部你得需求；

闲谈：html

百度搜了一下，虽然教程多，可是杂乱无章，实用的没多少，都是匆匆了事，因此我就本身学了两天，如今从最底层教你们完成webpack的经常使用功能，后期我会再写一篇gulp+webpack的前端神器文章，但我也要学好了再给你们发^_^!

nodejs安装：前端

1.https://nodejs.org/en/download/  选择对应本身的下载安装，命令行工具测试node -v是否成功；

smart-npm优化下载速度：node

2.安装完node后再测试一些 npm -v 命令是否成功，因为npm链接外网会常常下载插件会卡，推荐你们使用smart-npm；
在CMD命令窗口中输入：npm install --global smart-npm@1 --registry=https://registry.npm.taobao.org/
安装完成后会自动替换当前npm，这时候你再试试安装其余的插件是否是很快了^_^？！

webpack全局安装：jquery

3.CMD命令窗口中输入：npm install -g webpack

新建项目：webpack

4.新建文件夹命名为webpack，若是你创建在D：test/webpack 在cmd命令窗口依次输入d: 、cd test 、 cd webpack 如今咱们已经进入咱们新建的webpack文件夹输入：

一直按回车；完成后如今项目里面就有一个package.json，咱们多加一点东西；创建如下文件：es6

/app
  index.js
  pro.js
package.json
webpack.config.js

添加了两个js文件，添加了最重要的webpack->webpack.config.js的配置文件(文件名字不能更改)，咱们仍是从简单的hello world开始吧，webpack原生直接支持AMD和CommonJS两种模块；web

JS代码ajax

pro.jsnpm

//咱们这里使用CommonJS风格

function generateText() {
  var element = document.createElement('h2');
  element.innerHTML = "Hello h2 world";
  return element;
}

module.exports = generateText;//module.exports这个函数会把generateText方法暴露给全局在其余js中就能够引用了, exports至关于导出，后面index.js中的require就是导入；

index.js

var pro  = require('./pro');//填写模块路径，导入文件后缀的js能够省略。
var app  = document.createElement('div');
app.innerHTML = '<h1>Hello World</h1>';
app.appendChild(pro());
document.body.appendChild(app);

以上代码功能很简单，就是把pro.js定义为一个模块，在index.js中引用，最终两文件中要添加的内容都显示在index.html中。

配置Webpack

如今开始配置webpack，目标是把这两个js文件合并成一个文件. 咱们能够本身在build文件夹里面手动建一个index.html文件夹，而后再把合并之后的js引用在里面，可是这样有些麻烦，因此咱们这里安装一个plugin，能够自动快速的帮咱们生成HTML。

npm install html-webpack-plugin --save-dev

好有了这个插件开始写webpack.config.js文件

var path = require('path');//node 引入自带方法
var HtmlwebpackPlugin = require('html-webpack-plugin');
//定义了一些文件夹的路径
var ROOT_PATH = path.resolve(__dirname);//__dirname是获取当前文件的绝对路径，注意双下划线
var APP_PATH = path.resolve(ROOT_PATH, 'app');
var BUILD_PATH = path.resolve(ROOT_PATH, 'build');

module.exports = {
  //项目的文件夹 能够直接用文件夹名称 默认会找index.js 也能够肯定是哪一个文件名字
  entry: APP_PATH,
  //输出的文件名 合并之后的js会命名为bundle.js
  output: {
    path: BUILD_PATH,
    filename: 'bundle.js'
  },
  //添加咱们的插件 会自动生成一个html文件
  plugins: [
    new HtmlwebpackPlugin({
      title: 'Hello World app'
    })
  ]
};

而后在项目根目录运行

D:\test\webpack>webpack

终端显示一堆信息，而后告诉你成功了。

你可使用webpack --help看看一些运行的时候可选的参数

你会发现多出来一个build文件夹，直接点开里面的html文件，你会发现咱们可爱的“hello world”已经插入到页面了。咱们的任务完成了，成功生成html，合并js，html引入了js，js被执行了。

配置webpack-dev-server

上面任务虽然完成了，可是咱们要不断运行程序而后查看页面，因此最好新建一个开发服务器，能够serve咱们pack之后的代码，而且当代码更新的时候自动刷新浏览器。

安装webpack-dev-server

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

安装完毕后在webpack.config.js中添加配置

module.exports = {
  ....
  devServer: {
    historyApiFallback: true,
    hot: true,
    inline: true,
    progress: true,
  }
  ...
}

而后再package.json里面配置一下运行的命令,npm支持自定义一些命令

...
"scripts": {
  "start": "webpack-dev-server --hot --inline"
},
...

好了，在项目根目录下输入npm start,一堆信息后server已经起来了，在浏览器里面输入http://localhost:8080 发现伟大的hello world出现了，在js里面随便修改一些输出而后保存, 浏览器自动刷新，新的结果出现了。

添加CSS样式

如今来添加一些样式，webpack使用loader的方式来处理各类各样的资源，好比说样式文件，咱们须要两种loader，css-loader 和 style－loader，css-loader会遍历css文件，找到全部的url(...)而且处理。style-loader会把全部的样式插入到你页面的一个style标签中。

安装咱们的loader

npm install css-loader style-loader --save-dev

配置loader，在webpack.config.js中

devServer: {
    historyApiFallback: true,
    hot: true,
    inline: true,
    progress: true,
  },
  ...
  module: {
    loaders: [
      {
        test: /\.css$/,
        loaders: ['style', 'css'],
        include: APP_PATH
      }
    ]
  },
  ...
  plugins: [
    new HtmlwebpackPlugin({
      title: 'Hello World app'
    })
  ]

看loaders的书写方式，test里面包含一个正则，包含须要匹配的文件，loaders是一个数组，包含要处理这些程序的loaders，这里咱们用了css和style，注意loaders的处理顺序是从右到左的，这里就是先运行css-loader而后是style-loader.

新建一个样式文件 main.css

h1 {
    color: red;
}

记得在入口文件index.js中引用

require('./main.css');

而后发现标题变成红色的了，webpack的理念是基于项目处理的，把对应的文件格式给对应的loader处理，而后你就不用管了，它会决定怎么压缩，编译。

那如今想使用一些有爱的css预编译程序，来点sass吧。你可能已经想到了，再来个loader就行啦，确实是这样简单。

npm install sass-loader --save-dev

稍微修改一下webpack.config.js，删掉咱们先前添加的css规则，加上下面的loader

{
    test: /\.scss$/,
    loaders: ['style', 'css', 'sass'],
    include: APP_PATH
  },

添加两个sass文件，variables.scss和main.scss

variables.scss

$red: red;

main.scss

@import "./variables.scss";

h1 {
  color: $red;
}

在index.js中引用

require('./main.scss');

而后发现标题如愿变红，至关简单吧。

处理图片和其余静态文件

这个和其余同样，也许你也已经会玩了。安装loader，处理文件。诸如图片，字体等等，不过有个神奇的地方它能够根据你的需求将一些图片自动转成base64编码的，为你减轻不少的网络请求。

安装url-loader

npm install url-loader --save-dev

配置config文件

{
    test: /\.(png|jpg)$/,
    loader: 'url?limit=40000'
  }

注意后面那个limit的参数，当你图片大小小于这个限制的时候，会自动启用base64编码图片。

下面举个栗子。

新建一个imgs文件夹，往里面添加一张崔叔的照片。在scss文件中添加以下的东西。

@import "./variables.scss";

h1 {
  color: $red;
  background: url('./imgs/avatar.jpg');
}

npm start, 而后查看图片的url，用浏览器审查元素看到生成了best64位码的图片编码，建议一些图标什么的用此功能。
添加第三方库

有的时候还想来点jquery，moment，undersocre之类的库，webpack能够很是容易的作到这一点，有谣言说Bower即将中止开发了, 做者推荐都使用npm来管理依赖。那么咱们如今安装在咱们的app中添加jquery和moment的支持。

npm install jquery --save-dev

在js中引用

var pro = require('./pro');
var $ = require('jquery');
var app  = document.createElement('div');
app.innerHTML = '<h1>Hello World it</h1>';
document.body.appendChild(app);
app.appendChild(pro());
$('body').append('<p>look at me! now is ' + new Date() + '</p>');

看看浏览器，成功！ jquery如今都起做用了！

开发技巧

启用source-map

如今的代码是合并之后的代码，不利于排错和定位，只须要在webpack.config.js中添加

...
  devtool: 'eval-source-map',
  ...

这样出错之后就会采用source-map的形式直接显示你出错代码的位置。

配置webpack-dev-server代理

一个典型的例子就是先后端分离。后端是的server无论用什么写的。假定在本机他是相似http://localhost:5000/api/*这类的请求，如今添加配置让ajax请求能够直接proxy过去。

devServer: {
    hot: true,
    inline: true,
    //其实很简单的，只要配置这个参数就能够了
    proxy: {
      '/api/*': {
          target: 'http://localhost:5000',
          secure: false
      }
    }
}

重启之后发现/api/*的请求都代理到http://localhost:5000去了～
安装jshint检测js语法

npm install jshint-loader --save-dev

在config文件中配置

module: {
...
    //和loaders同样的语法，很简单
    perLoaders: [
        {
            test: /\.jsx?$/,
            include: APP_PATH,
            loader: 'jshint-loader'
        }
    ]
}

...
//配置jshint的选项，支持es6的校验
jshint: {
  "esnext": true
},

好了如今每次npm run start的时候就能够看到jshint的提示信息咯
有时某些插件都须要全文件使用例如：jquery
webpack提供一个插件把一个全局变量插入到全部的代码中，在webpack.config.js里面配置

...
  plugins: [
    new HtmlwebpackPlugin({
      title: 'Hello World app'
    }),
    //provide $, jQuery and window.jQuery to every script
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      "window.jQuery": "jquery"
    })
  ]
  ...

分离app.js和第三方库

如今咱们build出来的只有一个bundle.js 若是第三方库不少的话，会形成这个文件很是大，减慢加载速度，如今咱们要把第三方库和咱们app自己的代码分红两个文件。

修改entry入口文件

entry: {
    app: path.resolve(APP_PATH, 'index.js'),
    //添加要打包在vendors里面的库
    vendors: ['jquery', 'moment']
  },

添加CommonsChunkPlugin

plugins: [
    //这个使用uglifyJs压缩你的js代码
    new webpack.optimize.UglifyJsPlugin({minimize: true}),
    //把入口文件里面的数组打包成verdors.js
    new webpack.optimize.CommonsChunkPlugin('vendors', 'vendors.js'),
    new HtmlwebpackPlugin({
      title: 'Hello World app'
    })
  ]

添加完毕运行npm run build
在build文件夹中发现以下结构

budle.jsindex.htmlvendors.js