【4858美高梅】wepack从0开端配备vue环境之一,生产布局和优化

By admin in 4858美高梅 on 2019年4月6日
  • webpack打包工具以往分外流行,熟习并且能够举办配备也变得十分重要。在读书和行使的进度中境遇过无数的题材,希望能够让本身记录下来,巩固自个儿的上学。

今日项目已经有了,可是要把它内置生产条件中依然有些事情要做,在那最终一节,来把它们壹壹消除。

github传送门
dev分支
webpack之2webpack陈设优化
webpack之3集成vuex和vue-Router

1. 新建2个文本夹,命名字为 webpack-cli , webpack-cli
正是你的连串名,项目名提议使用小写字母,并且不带空格,无法含有大写字母.

一.创建文件目录

那壹节其实更加多是有关webpack的剧情。可是要想把react用得很爽,大家须要二个现代化的创设筑工程具。在头里几节webpack都在默默地下工作作着。react全都是有关组件的,组件意味着模块化,webpack让前者模块化得淋漓尽致。我们的靶子是要把react用起来,并且是很舒坦的用起来,所以本人认为那节并没跑题,而且很要紧。

  • ### 创立项目根目录

  • ### 在vscode中打开, 在极端中输入

2. 安装 Webpack,Webpack 能够利用 npm 安装.
运用极限在该公文夹中推行下述指令就足以形成安装,由于互联网原因安装进程或然须求壹些光阴。

先在温馨的常用盘中(笔者本身的档次1般都建在E盘的1个文件夹下)创立贰个文件夹,比如webpack_demo,笔者用的编辑器是visual
studio
code,使用ctrl+`直接切到那么些文件目录下4858美高梅 1

打包陈设文件

大家的源代码是无奈直接跑起来的。ES陆语法超越五成浏览器还不完全协理,有些浏览器完全不支持。而less、sass那几个样式框架就更毫不说了。此外对那一个代码最佳开始展览削减,以赢得更加快的访问速度。所以在正儿8经宣告这几个代码前务必先要编写翻译打包。webpack不过干这几个的以大金牌,看名字就领悟了。那要怎么打包呢?终端履行:

npm run dist

搞定。

以往我们的体系目录里多出了3个名字为dist的文件夹,这之中纵使要布置的全体内容。由于generator-react-webpack-redux已经为大家做好了webpack的有的布置,所以大家来看打包好的公文已经因此了缩小混淆。

//全局安装
npm install -g webpack
//安装到你的项目目录
npm install --save-dev webpack
注:建议用淘宝镜像的cnpm依赖包能下载的快一些

然后在该终端输入npm init
使其生成叁个package.json文件

服务器设置

如若我们在应用react-router的时候接纳了浏览器历史管理艺术,那么服务器必需求力所能及正确处理种种路子。实际上大家的施用唯有三个页面文件,在走访各类有效路径的时候,服务都应当回到那唯一的页面。在开发进程中,咱们由此npm
start指令运维了一个node服务,它曾经处理好了那几个路由。不过在骨子里生产条件中,大家往往会动用1个静态服务器,比如nginx或apache。即使把刚刚打包好的dist目录扔给nginx,你会发现唯有根路径能够访问,通过点击跳转到各种路由没难题(也正是经过react-router控制的跳转),要直接在浏览器的地址栏输入”

咱俩所需配置的内容都在http > server节点下。

第一思虑对诸如/news那样的不二等秘书籍并不设有对应的页面文件,所以对于未知路径要都给打发到根路径下:

location / {
  root   /Users/someone/my-project/dist;
  index  index.html index.htm;
  try_files $uri /index.html;
}

那般,大家在地点栏输入”

有关脚本、图片那些静态文件我们决不处理,因为nginx根据路径就能够直接找到那几个文件。其它正是把后端服务的接口处理好,nginx代理tomcat这一个后端服务是很广泛的布署,只要注意在路径上服务和页面要能分明有别于开,比如具有的后端服务接口都有.do后缀,那样布置就行了:

location ~*.do$ {
  proxy_pass   http://192.168.1.1:8088;
}
// cd到项目目录
cnpm init -y

Webpack 能够全局安装,也得以安装到您的档次目录.刚开头读书 Webpack
为了便于,建议还要全局安装和安装到您的种类目录.

4858美高梅 2

分开样式文件

固然在演示代码里本人把体制都写成内联方式的了,但自己要么提出写单独的体裁文件。后边也波及过,样式文件能够一向在js代码中引进,那对于组织独立的模块万分有益。可是在暗中同意状态下,大家会发现导出的文本未有css文件,实际上导入的体制是在代码运维时加到页面上的style标签里的。那样页面渲染品质不太好,而且会叠加js文件的体积,最棒仍然把它拿出来。万能的npm里有专职干部那个的webpack插件,来把它装上先:

npm install extract-text-webpack-plugin --save-dev

然后要修改一下webpack的配置文件。由于这些插件只有在包装的时候才会用到,所以我们只改cfg/dist.js文件。引进这些插件,然后在plugins数组里添加相应的类型:

// ...
let ExtractTextPlugin = require('extract-text-webpack-plugin');
// ...
let config = _.merge({
  // ...
  plugins: [
    // ...
    new ExtractTextPlugin('app.css')
  ]
// ...

还要改一下loader。原本loader是写在cfg/base.js里面的,然而在付出条件中大家用不到那么些插件,而只要利用了插件提供的loader就会报错,所以大家在dist.js里面把config.module.loaders数组覆盖。即使大家的门类里用到了css和less二种体制文件,就在config.module.loaders.push那一段前边添加如下代码:

config.module.loaders = [
  {
    test: /\.css$/,
    loader: ExtractTextPlugin.extract('style-loader', 'css-loader')
  },
  {
    test: /\.less/,
    loader: ExtractTextPlugin.extract('style-loader', 'css-loader!less-loader')
  },
  {
    test: /\.(png|jpg|gif|woff|woff2)$/,
    loader: 'url-loader?limit=8192'
  }
]

那边除了二种体制文件的loader以外,还把base里的1个非样式的loader给带过来了,别把它忽略了,它很有用,1会儿再说。

现行反革命再运营npm run
dist,可以看来asset文件夹里多了一个app.css文件。别忘了在index.html文件之中引入新变化的体裁文件。

生成package.json文件

3. 在 webpack-cli 文件夹中创立一个 package.json 文件,那是二个标准的
npm
表明文件,里面含有了丰盛的消息,包涵最近项指标依赖模块,自定义的剧本任务等等。在顶峰中央银行使
npm init 命令能够活动创立那一个 package.json 文件.

然后在webpack_demo文件夹下建立如下文件目录:

加载图片

webpack让大家得以在js代码中引进图片并行使,引进图片只需3个简短的require语句:

let logo = require('..logo.png');

然后能够像使用别的变量一样来利用这一个图形:

render(){
  return <img src={logo}>
}

你恐怕以为,1个图片直接用它的路子就行了,何须要装模做样的引进呢?作者觉着有这么做多少个便宜:

第3依然模块化。倘若一个组件必要用到图片,在这么些组件文件内引入图片,图片会在run
dist时1并打包,不用担心图片丢失。

附带很多服务器会对图纸展开CDN缓存,若是您替换了一张图片,很恐怕它在一段时间内不会收效,而经过webpack引进的图样是一内联base6④或许重命名叫唯壹hash文件名的格局打包的,那样就不会油但是生恼人的缓存景况。

不单是在js中引进图片会被webpack处理,css里的图形也会被同样的措施处理。

假如你早已在您的项目里丰硕了多少个小图片,你大概会发觉包裹后并未观看图片只怕图片比原先少,那是因为有三个逼近值,低于它的图片会一向转成base6四写在导出的js文件里。那样能够也倒霉,好处是图片在一起首就被载入,后边不会出现图片延后载入的效率,用户体验很好,不佳就是base6四比原图片大小越来越大,假使图片比较多,导出的js文件就会太大,让用户起初等待时间过长。所以大家要权衡利弊设置四个适用的临界值。前边大家在dist.js配置文件中重写loaders的时候把base里的贰个loader带了恢复生机,它正是干这几个用的,test属性的正则表明式表明大家想让webpack处理什么格式的图片,loader属性最终的数字正是内联图片临界值,单位是字节。大家把它设置成一K吗:

{
  test: /\.(png|jpg|gif|woff|woff2)$/,
  loader: 'url-loader?limit=1024'
}
  • ### 安装webpack和vue, vue-loader
npm init

4858美高梅 3

多少个入口

咱俩的对象是单页应用,不过当项目范围相比较大的时候整个项目恐怕会被拆分成多少个单页应用。拆分五个使用的关键在于要有多个输入文件。方今大家的体系只有2个进口文件:src/index.js。来看cfg/dist.js文件,里面包车型大巴config对象中entry属性的值未来是3个index.js路径字符串。entry的值也能够是一个对象,这样就能够声明多少个输入文件,对象的key对应着公文名。比如大家想要扩展二个输入文件src/test.js,先搞点很简短的剧情:

import React from 'react';
import { render } from 'react-dom';

render(
  <div>TEST</div>,
  document.getElementById('app')
);

把cfg/dist.js中的config.entry改成这么:

entry: {
  app: path.join(__dirname, '../src/index'),
  test: path.join(__dirname, '../src/test')
}

方今肯定钦赐了八个入口文件,然后还要修改config.output.filename:

config.output.filename = '[name].js'

出口文件时,name会自动对应成entry中的key。执行npm run
dist,未来asset目录中多出了个test.js。

行使那一个文件需求另二个独立的页面,假设大家用静态html页面包车型大巴话,要把页面路径添加到项目根目录下的package.json中,在scripts对象中有个copy属性,加到里面就行了,那样才能在run
dist的时候把它一并拷贝到dist目录里。

末段,可能你还要修改一下nginx配置,让test路径单独相配。

输入这些命令后,终端会问您一名目繁多诸如项目名称,项目版本,项目描述,入口文件,小编等音讯,然则并非操心,假如你不准备在
npm
中发表你的模块,那几个难点的答案都不首要,傻瓜式操作一路回车暗中同意即可.那个音信之后都得以变动
package.json 来修改,所以不要担心.

二.进展基础配置打包

离别第2方库

您只怕发现了刚刚咱们把文件分为四个输入时,新入口文件即便内容分外少,哪怕只渲染了三个div,生成的文件大小还有不少k。里面其实根本都以第一方库。那太不美观了,既然那几个第贰方库大概会被有着的选择重复使用,一定得把他们单拎出来。于是大家供给2个插件:CommonsChunkPlugin。这一个插件不用单独安装了,它被含有在webpact.optimize里面。大家打算再出口三个叫commons.js的公文,包括全部第壹方库。在cfg/dist.js的plugins数组里面添加那些插件:

new webpack.optimize.CommonsChunkPlugin('commons', 'commons.js')

然后在entry对象里面再添加3个commons属性,它的值是三个数组,包涵全体咱们想要拎出来的库:

entry: {
  app: path.join(__dirname, '../src/index'),
  test: path.join(__dirname, '../src/test'),
  commons: [
    'react',
    'react-dom',
    'react-redux',
    'react-router',
    'redux',
    'redux-thunk'
  ]
}

OK,输出的公文多了个commons.js,而app.js和test.js比原来小了不少。那回优雅了。别忘了在装有的页面里都把commons.js引入去。

cnpm i webpack vue-loader webpack@3 -D
cnpm i vue -S
// 安装完成根据warning安装需要的依赖
css-loader vue-template-compiler -D

4. 在 webpack-cli 文件夹中开创八个公文夹 src文件夹和 dist文件夹,
src文件夹用来存放在原始数据,例如: SASS 文件、LESS 文件、JavaScript
模块等,dist 文件夹用来存放在经过 Webpack 处理过的
src文件夹数据,那也是准备给浏览器读取的多少,当中囊括使用 Webpack 打包后的
js 文件等。在那边还亟需在 dist 文件夹中创设 index.html 文件.在
src文件夹中创造 name.js 和 main.js 文件,此时项目协会如下图所示:

建立好地方的目录之后,未来就该往里面添加内容了。往index.html
、index.js里面添加1些内容,那么些剧情就看个人专断了,只假如合理的都得以。在那多个文本之中添加内容是为了待会进行webpack打包的时候,不至于让打包出来的事物都是空的,不然那就很狼狈了。然后就该进行webpack.config.js里面配备了。上边是自笔者实行的粗略的配置:

按需加载

当项目非常大的时候,拆分多少个输入文件是一种方案,还有一种方案是按需加载,也便是懒加载或异步加载。大家能够让用户真正进入3个路由时才把相应的零件加载进来,要落到实处那个十分简单,只供给二个webpack的loader:react-router-loader,先用npm把它安装上,然后修改src/routs.js文件,比如大家未来想让报到页面懒加载,那就把登录页面包车型大巴路由改成那样:

<Route path="login" component={require('react-router!./containers/Login')}/>

编译打包后,又多出了二个一.一.js文本,那就是在进入登录路由时要加载的文书,相当于单独的报到组件。此外的就不用大家管了,代码会活动处理的。

既然是按需加载,大家自然是目的在于起先的时候加载的代码尽量少,尽恐怕在进入某些路由时才载入相应的全体内容。大家的代码大概就三类东西:组件、action和reducer。组件很鲜明能够是单身载入的。reducer大概无法,因为它须求教导整个仓库状态的成立。至于action,大家眼下的言传身教代码是不单独的,因为reducer要依赖action文件之中的常量,大家只须要把具备的常量提议到三个国有的文件中,唯有组件引用action文件。比如大家新建贰个src/consts.js文件,内容是:

export const INPUT_USERNAME = 'INPUT_USERNAME'
export const INPUT_PASSWORD = 'INPUT_PASSWORD'
export const RECEIVE_NEWS_LIST = 'RECEIVE_NEWS_LIST'
export const SET_KEYWORD = 'SET_KEYWORD'
// 所有action的常量...

接下来还以login为例,把src/reducers/login.js里面引进常量的靶子改为consts.js:

import {INPUT_USERNAME, INPUT_PASSWORD} from '../consts'

src/actions/login.js里也如此引入常量。run
dist后,一.1.js文件就富含了actions/login.js里面包车型地铁内容。

  • ### 创建src/app.vue

4858美高梅 4

4858美高梅 5

添加hash后缀

在一个大型且必要反复升级的种类中,静态文件反复必要添加hash后缀,那首借使由于多个原因:2个是有所版本的静态文件能够而且存在,而页面由后端控制,后端依据接口的本子绑定js和css文件,那样有利于升级和回滚。另三个是严防缓存,那和前边图片重命名字为hash值是一个道理。

让webpack为文件名添加后缀极度简单,只须求在输出的文件名上丰硕[hash]就足以了。比如大家想让app.js带上hash后缀,只必要在cfg/dist.js最终一句后边加上一句:

config.output.filename = 'app.[hash].js'

而对于插件生成的体制文件和国有js文件1律也是在文书名上加上[hash]就行了。

明天重中之重的题材是怎么使用那个有了hash后缀的文本。总不可能每打贰回包我们就手动改一下index.html把。

webpack的布署文件是js,那就象征那些布局文件是活的,我们得以很不难把想做的政工业经济过代码实现。今后本人要在每趟打包后把index.html文件引进的js和css文件自动替换成带hash尾巴的花样,只需添加2个祥和写的插件,其实正是四个函数。在cfg/dist.js里面包车型地铁plugins数组里添加以下函数:

function() {
  this.plugin("done", function(stats) {
    let htmlPath = path.join(__dirname, '../dist/index.html')
    let htmlText = fs.readFileSync(htmlPath, {encoding:'utf-8'})
    let assets = stats.toJson().assetsByChunkName
    Object.keys(assets).forEach((key)=>{
      let fileNames = assets[key];
      ['js', 'css'].forEach(function(ext){
        htmlText = htmlText.replace(key+'.'+ext, fileNames.find(function(item){
          return new RegExp(key+'\\.\\w+\\.'+ext+'$').test(item)
        }))
      })
    })

    fs.writeFileSync( htmlPath, htmlText)
  });
}

很暴力,便是赤裸裸的node操作文件系统。那回dist文件夹中的index.html里引进的台本和体制都以带hash的了。

在比比皆是类型中,咱们前端要提供的可能不是一个引用好js和css的html文件,而是1个map文件,里面有静态文件的版本音信(hash值),这样后端就能平昔把须要的静态文件挂上。能够协调写三个跟上边代码类似的插件输出三个map文件,也可在万能的npm找个插件,比如map-json-webpack-plugin。上边1二分作用也得以试行replace-webpack-plugin。

 

到那里,那1多种关于react的博客就算告1段落了。其实作者还想写3个关于测试的,因为react+redux的那种情势尤其方便测试,可是笔者还在雕刻测试当中,等研究得大约了大概会补上1篇。

🖐

 

上一节 【3】穿越spa的路由

7dd3450fc0d74c2129959f80083d61d.png

4858美高梅 6

<template>
  <div class="text">{{text}}</div>
</template>
<script>
export default {
  data () {
    return {
      text: 'abc'
    }
  }
}
</script>
<style>
  .text {
    color: red;
  }
</style>

5.在 dist文件夹中的 index.html 文件唯有最基础的 html
代码,它唯壹的目标便是加载打包后的 js 文件 bundle.js.

最棒简练的进口、出口、插件、本地服务的安顿。entry是进口文件,使用的是相对路径,对应到入口文件index.js,那里配置的是单入口文件。多入口的之后配置。output是包装后的文件的门道,使用的是相对路径。打包后的文书都在dist目录下。出口文件的称号filename使用的是[name].js,那种写法正是为着与进口的文件名称相呼应,也有另一个原因,正是多入口文件的时候,出口也呼应的有两个,那样使用[name].js就不怕你是单入口依旧多入口,很便宜。接下来就是本地服务的安插,host能够选取本机ip地址,也能够运用localhost,port正是投机设置的端口。这么些html-webpack-plugin插件有多少个职能:

  • ### 创建/webpack.config.js
// index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>webpack-cli</title>
</head>
<body>
    <div id="root"></div>
    <script src="bundle.js"></script>
</body>
</html>
  •  为html文件中引进的外表能源如scriptlink动态拉长每回compile后的hash,防止引用缓存的外部文件难题
  • 【4858美高梅】wepack从0开端配备vue环境之一,生产布局和优化。 能够转移创立html入口文件,比如单页面能够生成多少个html文件输入,配置Nhtml-webpack-plugin能够变更N个页面入口

6. 在 src文件夹中的 name.js 只囊括一个用来回到name新闻的 html
成分的函数。

 那几个插件有那几个的安插项,那里我只用到了八个,removeAttributeQuotes是不是去掉属性的引号,如下type
和 src属性里面包车型客车引号就都去掉了;hash
是还是不是为持有注入的静态财富添加webpack每一次编写翻译发生的唯1hash值,添加hash方式如下所示

 const path = require('path')

module.exports = {
  entry: path.join(__dirname, 'src/index.js'),
  output: {
    filename: 'bundle.js',
    path: path.join(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.vue$/, 
        loader: 'vue-loader'
      }
    ]
  }
}
// name.js
module.exports = function(){
    var name = document.createElement('h1');
    name.textContent = "My name is MMhui";
    return name;
};
<script type=text/javascript src=index.js?772a5c2dd58541f56576></script></body>
  • ### 创建/src/index.js 入口js文件

7. 在 src文件夹中的 main.js 用来把 name模块(其实能够简单的把它作为
name.js)再次来到的节点插入页面。

 

// main.js
var name = require('./name.js');
document.querySelector('#root').appendChild(name());

 template便是地面模板的设置。上述打包之后的结构目录如下

import Vue from 'vue'
import App from './app.vue'

const root = document.createElement('div')
document.body.appendChild(root)

new Vue({
  render: h => h(App)
}).$mount(root)

Webpack 配置文件

Webpack 配置文件其实也是2个差不多的 JavaScript
模块,能够把具有与项目构建相关的音讯放在在那之中。在 webpack-cli
文件夹根目录下新建四个名称为 webpack.config.js
的文本,并在里面进展最简单易行的配置.如下所示,它含有入口文件路径和存放打包后文件的地点路径。

// webpack.config.js
module.exports = {
    entry: __dirname + '/src/main.js', // 入口文件路径
    output: {
        path: __dirname + '/dist/', // 存放打包后文件的路径
        filename: 'bundle.js'   // 打包后文件名
    }
};
注:__dirname 是 node.js 中的一个全局变量,它指向当前 js 文件所在的目录.

现行反革命只供给在终端里运维 webpack 命令就能够了,那条命令会自动参考
webpack.config.js 文件中的配置选项打包你的系列,输出结果如下:

4858美高梅 7

那会儿项指标 dist 文件夹下也会产出打包好的 bundle.js
文件.此时项目结构如下图所示:

4858美高梅 8

能够看出 webpack 同时编写翻译了 main.js 和 name.js,打开 src目录下的
index.html 文件,就足以看到最后效果,如下图:

4858美高梅 9

4858美高梅 10

  • ### 安装style-loader和css-loader, url-loader, file-loader, 处理css和图片文件
选拔 npm 更迅捷的执行打包职务

经过 Webpack 配置文件和推行 webpack
命令其实是比较烦人且易于失误的,但是值得庆幸的是 npm
能够引导职责履行,对其实行安排后能够行使简单的 npm start
命令来代替这几个麻烦的一声令下。在 package.json 中对 npm
的本子部分开始展览连锁设置,约等于把 npm 的 start 命令指向 webpack
命令,设置格局如下:

// package.json
{
  "name": "webpack-cli",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^3.8.1"
  }
}

实施 npm start 后命令行的出口呈现:

4858美高梅 11

当今只必要选取 npm start 就能够打包文件了.打开 dist 目录下的 index.html
文件,看到的结尾效果是或不是与事先的一样.

包装后的index.html文件之中的始末如下:

利用 Webpack 生成 Source Maps

容易易行说,Source Maps
正是1个消息文件,里面储存着地点消息。也正是说,转换后的代码的每二个岗位,所对应的转移前的地点.有了它,出错的时候,除错工具将直接显示原始代码,而不是更换后的代码。那无疑给开发者带来了十分的大方便.为了便于调试能够利用
Webpack 生成 Source Maps.

在 Webpack 的布局文件中布局 Source Maps,必要陈设devtool,它有以下各样不一致的配置选项,各有利害,描述如下:

1.source-map
在3个单独的文本中发出1个总体且成效完全的公文。那一个文件具有最有利于调节和测试的
Source Maps,不过那么些文件会相比较大,会减慢打包文件的构建速度.
2.cheap-module-source-map 在3个独门的公文中生成三个不带列映射的
Source
Maps,不带列映射可以增强项目创设速度,但这也使得浏览器开发者工具只可以对应到具体的行,无法对应到具体的列,会对调剂造成不便.
3.eval-source-map 在同二个文件中生成干净的完好的 Source
Maps。那几个选项能够在不影响构建速度的前提下生成完全的 Source
Maps,不过对包裹后输出的 js
文件的实施具有质量和平安的隐患。不过在开发阶段那是多少个格外好的选项,不过在生养阶段一定不要用这些选项.
4.cheap-module-eval-source-map 那是在包装文件时最快的生成 Source
Maps 的形式,生成的Source Map 会和包裹后的 js
文件同行展现,未有列映射,和 eval-source-map
选项具有相似的症结,文件的履行具有品质和安全的隐患.

上述选项由上到下打包速度越来越快,然而同时也持有越多的阴暗面效果,较快的创设速度的结局就是对包裹的文件实施有早晚影响。在求学阶段以及在小到中型的门类上,eval-source-map是贰个很好的选项,可是记得只在开发阶段使用它.

编辑 webpack-cli 文件夹下的 webpack.config.js 文件配置 devtool 选项,生成
Source Maps 文件.配置 devtool 后的 webpack.config.js 文件如下:

// webpack.config.js
module.exports = {
    entry: __dirname + '/src/main.js', // 入口文件路径
    output: {
        path: __dirname + '/dist/', // 存放打包后文件的路径
        filename: 'bundle.js'   // 打包后文件名
    },
    devtool: 'source-map' // 配置生成的source-map
};

推行 npm start 命令后就能生成相应的 Source Maps,终端输出消息如下图:

4858美高梅 12

那时项目中 dist文件夹下也生成了名字为 bundle.js.map 的 Source Maps
文件.此时项目协会如下图所示:

4858美高梅 13

<!DOCTYPE html>
<html lang=en>
<head>
    <meta charset=UTF-8>
    <meta name=viewport content="width=device-width,initial-scale=1">
    <meta http-equiv=X-UA-Compatible content="ie=edge">
    <title>webpack_demo</title>
</head>
<body>
    <div id=title></div>
  <script type=text/javascript src=index.js?772a5c2dd58541f56576></script></body>
</html>
cnpm i style-loader url-loader file-loader -D
url-loader依赖于file-loader
module: {
    rules: [
      {
        test: /\.vue$/, 
        loader: 'vue-loader'
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.(jpg|png|svg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192,
              name: '[name]-kay.[ext]'
            }
          }
        ]
      }
    ]
  }

选用 Webpack 创设地面服务器

想不想让您的浏览器监测你改改的代码,并活动刷新修改后的结果.其实 Webpack
提供一个可选的地头开发服务器,那一个本地服务器基于 node.js
营造,能够兑现您想要的那一个作用,然则它是二个单身的组件,在 Webpack
中展开配置此前必要单独安装它看成项目正视.在极限中输入上边包车型地铁命令安装相应组件.建议还要全局安装和设置到你的种类目录.

//全局安装
npm install -g webpack-dev-server
//安装到你的项目目录
npm install --save-dev webpack-dev-server

devserver 作为 Webpack 配置选项中的一项,具有以下配置选项

contentBase: 暗中同意 webpack-dev-server
会为根文件夹提供地点服务器,如若想为其余一个索引下的文件提供本地服务器,应该在此地安装其所在目录(本例设置到“dist”文件夹下).
port: 设置暗中同意监听端口,假诺不难,暗中同意为”8080″.
inline: 设置为 true,当源文件改变时会自动刷新页面.
historyApiFallback: 在支付单页应用时十分有用,它借助于 HTML5 history
API,要是设置为 true,全数的跳转将本着 index.html.
open: 直接打开浏览器

编辑 webpack-cli 文件夹下的 webpack.config.js 文件配置以上选项.

// webpack.config.js
module.exports = {
    entry: __dirname + '/src/main.js', // 入口文件路径文件所在的目录.
    output: {
        path: __dirname + '/dist/', // 存放打包后文件的路径
        filename: 'bundle.js'   // 打包后文件名
    },
    devtool: 'source-map', // 配置生成的source-map
    devServer: {
        contentBase: './dist',
        port: '9000',
        inline: true,
        historyApiFallback: true,
        open: true
    }
};

在终端中输入如下命令,构建本地服务器:
webpack-dev-server

极限输出消息如下图,表示 Webpack 营造的本地服务器已运行.

4858美高梅 14

浏览器自动打开
http://localhost:9000/
就足以看来像在此之前同1的页面.

4858美高梅 15

也足以应用 npm 越来越高速的进行职责,编辑 webpack-cli 文件夹下的 package.json
文件 scripts 选项.

// package.json
{
    "name": "webpack-cli",
    "version": "1.0.0",
    "description": "",
    "scripts": {
        "start": "webpack",
        "dev": "webpack-dev-server --devtool eval --progress --content-base build"
    },
    "author": "",
    "license": "ISC"
}

在终点中施行 npm run dev 命令,输出音信如下图,一样能够运营的本地服务器.

4858美高梅 16

按 Ctrl + C 即可退出本地服务器.

 

  • ### 安装rimraf 在build以前删除dist目录

总体皆模块

Webpack 有四个须求说的独到之处,它把富有的文本都足以作为模块处理,包罗你的
JavaScript 代码,也席卷 CSS 和 fonts 以及图片等等,只要经过适当的
Loaders,它们都足以被看做模块被处理.

那正是3个极致简单的webpack打包使用了。

Loaders

webpack 能够动用 loader 来预处理公事。那允许你打包除 JavaScript
之外的其它静态财富.通过使用不一样的 loader,Webpack
通过调用外部的台本或工具得以对任王辉态财富进行拍卖,比如说分析 JSON
文件并把它转换为 JavaScript 文件,或然说把 ES陆 / ES七 的 JS
文件转换为当代浏览器能够分辨的 JS 文件.对 React 开发而言,合适的 Loaders
能够把 React 的 JSX 文件转换为 JS 文件.

Loaders 须求单独安装还要需求 在webpack.config.js 下的 modules
关键字下举办安顿,Loaders 的安顿选项包含以下几地点:
test:二个相称 Loaders 所处理的文书的拓展名的正则表明式(必须)
use:use: [ { loader: [‘style-loader’]}, { loader:
[‘css-loader’], options: { modules: true } } ]
include/exclude:
手动添加必须处理的文件/文件夹,或屏蔽不必要处理的文书/文件夹(可选)
loader:loader 的名称(必须)
query:为 Loaders 提供额外的装置选项(可选)

继承出手实践,修改 src文件夹下的 name.js 文件,把问候音讯放在二个单独的
JSON 文件里,通过 loader 的使 name.js 能够读取该 JSON 文件.

1. 在 src文件夹下创造 name.json 文件,并输入如下代码:

//name.json
{
    "name": "My name is MMhui"
}

2. 编辑 src文件夹下的 name.js 文件,修改后如下:

// name.js
var text = require('./name.json');
module.exports = function(){
    var name = document.createElement('h1');
    name.textContent = text.name;
    return name;
};

3. 安装支撑导入 JSON 文件的 json-loader .由于 webpack 贰.×
私下认可援救导入 JSON 文件.假若您利用自定义文件扩展名,恐怕依然需求选用此
loader.在终点中运作如下命令,安装 json-loader 到你的品种中.

//安装到你的项目中
npm install --save-dev json-loader

因为 json-loader 安装到您的体系目录里了,所以 webpack-cli项目下会新增1个node_modules 文件夹用于存放安装的 json-loader.此时的门类组织如下:

4858美高梅 17

  1. 编纂 webpack.config.js 文件配置 modules 选项,添加
    json-loader,编辑后的公文如下:

// webpack.config.js
module.exports = {
    entry: __dirname + '/src/main.js', // 入口文件路径文件所在的目录.
    output: {
        path: __dirname + '/dist/', // 存放打包后文件的路径
        filename: 'bundle.js'   // 打包后文件名
    },
    devtool: 'source-map', // 配置生成的source-map
    devServer: {
        contentBase: './dist',
        port: '9000',
        inline: true,
        historyApiFallback: true,
        open: true
    },
    module: {
        rules: [
            {
                test: /\.json$/,
                loader: 'json-loader'
            }
        ]
    }
};

在终端中输入 npm start 重新编写翻译打包,再在浏览器中开辟 dist 文件夹下的
index.html 文件,借使见到和下图1律的,就表达 json-loader 配置成功了.

4858美高梅 18

3.css样式与js分离

cnpm i rimraf -D
//在package.json.script中添加cli
"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "npm run clean && webpack --config webpack.config.js",
    "clean": "rimraf dist"
  },

Babel

Babel 其实是三个编写翻译 JavaScript
的平台,它的强大之处表现在可以透过编写翻译帮你完毕以下指标:
把 ES陆 / ES柒 标准的 JavaScript 转化为浏览器能够分析的 ES五 标准的
JavaScript.
应用基于 JavaScript 实行了进展的语言,比如 React 的 JSX.

接下去正是往里面添砖加瓦了,有了js和html文件,当然依然须求有css文件了。在src目录下创制3个css文件夹,如下图:

  • ### 嵌入stylus: 安装stylus和stylus-loader

Babel的设置与配置

贝布el 其实是几个模块化的包,其基本功用位于号称 babel-core 的 npm
包中,可是 Webpack
把它们构成在共同使用,不过对于每二个您须要的功用或举办,你都急需安装单独的包.用得最多的是分析
ES陆 的 babel-preset-es20一5 包和分析 JSX 的 babel-preset-react 包.

先来安装那一个正视包,输入如下命令,把那几个正视包安装到您的项目中.

// 利用 npm 一次性安装多个依赖模块,模块之间用空格隔开
npm install --save-dev babel-core babel-loader babel-preset-es2015

编写 webpack.config.js 文件配置 module 选项,添加 Babel
配置,编辑后的文书如下:

// webpack.config.js
module.exports = {
    entry: __dirname + '/src/main.js', // 入口文件路径文件所在的目录.
    output: {
        path: __dirname + '/dist/', // 存放打包后文件的路径
        filename: 'bundle.js'   // 打包后文件名
    },
    devtool: 'source-map', // 配置生成的source-map
    devServer: {
        contentBase: './dist',
        port: '9000',
        inline: true,
        historyApiFallback: true,
        open: true
    },
    module: {
        rules: [
            {
                test: /\.json$/,
                loader: 'json-loader'
            },
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/, // 编译打包时排除node_modules文件夹
                query: {
                    presets: ['es2015']
                }
            }
        ]
    }
};

采用 ES陆 的语法,更新 src 文件夹下的 name.js 文件,修改后的代码如下:

// Greeter.js
import text from './name.json';
let el = document.createElement('h1');
el.textContent = text.name + '改动了';
export default el;

选择 ES陆 修改 src文件夹下的 main.js 文件,修改后的代码如下:

// main.js
import name from './name.js';
document.querySelector('#root').appendChild(name);

在极端中运作 npm start 命令重新编写翻译打包,终端输出音讯如下:

4858美高梅 19

在浏览器中打开 dist文件夹下的 index.html
文件,假若见到和下图一律的,就表达已经打响铺排了 Babel.

4858美高梅 20

4858美高梅 21

Babel的配置选项

Babel 其实能够完全在 webpack.config.js 文件中开始展览配备,不过思虑到 babel
具有十三分多的安顿选项,在单1的 webpack.config.js
文件中举办安排往往使得这一个文件展现太复杂,因而某个开发者协助把 babel
的安排选项放在3个独立的名叫 “.babelrc” 的配置文件中。大家前天的 babel
的配备并不算复杂,可是今后大家会再加壹些东西,因而未来大家就领取出相关部分,分四个布局文件实行布局,
Webpack 会自动调用 .babelrc 里的 babel 配置选项.

编写 webpack.config.js 文件配置 modules 选项,添加 Babel
配置,编辑后的文书如下:

// webpack.config.js
module.exports = {
    entry: __dirname + '/src/main.js', // 入口文件路径文件所在的目录.
    output: {
        path: __dirname + '/dist/', // 存放打包后文件的路径
        filename: 'bundle.js'   // 打包后文件名
    },
    devtool: 'source-map', // 配置生成的source-map
    devServer: {
        contentBase: './dist',
        port: '9000',
        inline: true,
        historyApiFallback: true,
        open: true
    },
    module: {
        rules: [
            {
                test: /\.json$/,
                loader: 'json-loader'
            },
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/ // 编译打包时排除node_modules文件夹
            }
        ]
    }
};

webpack-cli 文件夹下新建 .babelrc 文件,添加如下代码:

// .babelrc
{
    presets: ['es2015']
}

在极端中运作 npm start 命令重新编写翻译打包,终端输出消息如下:

4858美高梅 22

在浏览器中打开 dist文件夹下的 index.html
文件,要是看到和上次开拓的html页面1样的,就认证已经打响安顿了 Babel.

在输入文件index.js里面引进index.css

cnpm i stylus stylus-loader -D
{
    test: /\.styl$/,
      use: [
        'style-loader',
        'css-loader',
        'stylus-loader'
      ]
},

CSS

Webpack 提供五个工具处理样式表,css-loader 和 style-loader.

css-loader 使您可见利用类似 @import 和 url(…) 的法子完成 require()
的效应
style-loader 将富有的总括后的体制加入页面中
双方结合在协同使您可见把体制表嵌入 Webpack 打包后的 JS 文件中。

先来安装 css-loader, style-loader,输入如下命令,把这些依赖包安装到你的项目中.
npm install --save-dev style-loader css-loader

编辑 webpack.config.js 文件配置 module
选项,添加处理样式表配置,编辑后的文本如下:

// webpack.config.js
module.exports = {
    entry: __dirname + '/src/main.js', // 入口文件路径文件所在的目录.
    output: {
        path: __dirname + '/dist/', // 存放打包后文件的路径
        filename: 'bundle.js'   // 打包后文件名
    },
    devtool: 'source-map', // 配置生成的source-map
    devServer: {
        contentBase: './dist',
        port: '9000',
        inline: true,
        historyApiFallback: true,
        open: true
    },
    module: {
        rules: [
            {
                test: /\.json$/,
                loader: 'json-loader'
            },
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/ // 编译打包时排除node_modules文件夹
            },
            {
                test: /\.css$/,
                use: [
                    { loader: 'style-loader'},
                    {
                        loader: 'css-loader',
                        options: { modules: true }
                    }
                ]
            }
        ]
    }
};

接下去,在 src文件夹里成立2个名字为 main.css
的文本,在文件中添加如下代码,对有个别因素设置样式.

// main.css
html {
    box-sizing: border-box;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

html, body{
    width: 100%;
    height: 100%;
    background: #ccc;
}

Webpack 唯有单1的入口,其余的模块要求通过 import, require, url
等导入相关义务,为了让 Webpack 能找到 main.css 文件,大家把它导入 src
文件夹下的 main.js 中.修改 src文件夹下的 main.js 文件,修改后的代码如下:

// main.js
import name from './name.js';
import './main.css'; // 导入css文件
document.querySelector('#root').appendChild(name); 

在终点中运作 npm start 命令重新编写翻译打包,终端输出音讯如下:

4858美高梅 23

在浏览器中开拓 dist 文件夹下的 index.html
文件,若是看到和下图1律的,就表达已经陈设成功了.

4858美高梅 24

一般说来状态下,css 会和 js 打包到同三个文本中,并不会卷入为二个独自的 css
文件,然而通过适当的配备 Webpack 也得以把 css 打包为单身的文书的。
但是那也只是 Webpack 把 css 当做模块而已,继续看2个实在 CSS 模块的实践.

import './css/index.css'
document.getElementById('title').innerHTML = 'webpack demo'
  • ### 使用webpack-dev-server => 开发环境

CSS module

在过去的一些年里,JavaScript
通过某个新的语言特征、更加好的工具、更好的执行措施(比如说模块化)发展得尤其飞速。模块使得开发者把复杂的代码转化为小的、干净的、重视注解强烈的单元,且遵照优化学工业具,正视管理和加载管理能够自动完结。

唯独前端的其它一些,CSS
的升华就相对慢一些,大多的体裁表却照旧是伟大且充满了全局类名,那使得维护和改动都十一分费劲和复杂。

CSS modules 的技巧就能够把 JS 的模块化思想带入 CSS 中来,通过 CSS
模块,全部的类名,动画名暗许都只服从于近年来模块.

Webpack 从1开始就对 CSS 模块化提供了扶助,在 CSS loader
中开始展览布局后,你所急需做的漫天正是把 modules
传递到需求的地点,然后就足以一贯把 CSS
的类名传递到零部件的代码中,且那样做只对脚下组件有效,不必顾虑在分裂的模块中负有相同的类名恐怕会导致的题材。

编排 webpack.config.js 文件配置 modules
选项,添加处理样式表配置,编辑后的文书如下:

// webpack.config.js
module.exports = {
    entry: __dirname + '/src/main.js', // 入口文件路径文件所在的目录.
    output: {
        path: __dirname + '/dist/', // 存放打包后文件的路径
        filename: 'bundle.js'   // 打包后文件名
    },
    devtool: 'source-map', // 配置生成的source-map
    devServer: {
        contentBase: './dist',
        port: '9000',
        inline: true,
        historyApiFallback: true,
        open: true
    },
    module: {
        rules: [
            {
                test: /\.json$/,
                loader: 'json-loader'
            },
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/ // 编译打包时排除node_modules文件夹
            },
            {
                test: /\.css$/,
                use: [
                    { loader: 'style-loader'},
                    {
                        loader: 'css-loader?modules', // 此处多加了一个?modules
                        options: { modules: true }
                    }
                ]
            }
        ]
    }
};

接下去,在 src文件夹里创造1个名字为 name.css
的文书,在文书中添加如下代码,对部分要素设置样式.

// name.css
.root{
display: flex;
background: #fff;
padding: 10px;
border: 4px solid #f00;
}
导入 .root 到 name.js 中,修改 src文件夹下的 name.js
文件,修改后的代码如下:

// name.js
import text from './name.json';
import styles from './name.css'; // 导入.root到name.js中
let el = document.createElement('h1');
el.className = styles.root; // 导入.root到name.js中
el.textContent = text.name + '改动了';
export default el;

在极限中运营 npm start 命令重新编写翻译打包,终端输出音信如下:

4858美高梅 25

在浏览器中打开 dist文件夹下的 index.html
文件,要是看到和下图一律的,就印证已经配备成功了.

4858美高梅 26

CSS modules
也是三个相当大的宗旨,有趣味的话能够去合法文档查看更加多新闻.上面两篇文章也能够看看:

  1. CSS Modules
    用法教程
  2. CSS Modules 详解及 React
    中实践

 

安装cross-env区分开发环境和生育条件
配置html模板html-webpack-plugin
铺排webpack全局常量插件webpack.DefinePlugin()
变更webpack.config.js结构
在package.json.script里添加dev命令

CSS 预处理器

CSS 预处理器能够将 SASS、LESS 文件转载为浏览器可识其他 CSS
文件,以下是常用的CSS 预处理器 loaders.
Less Loader
Sass Loader
Stylus Loader

实质上也设有一个 CSS 的拍卖平台 PostCSS,它可以匡助您的 CSS
达成越来越多的机能,能够看看<<PostCSS
是个怎样鬼东西?>>.
比喻来说怎么着行使 PostCSS,大家使用 PostCSS 来为 CSS
代码自动抬高适应不一样浏览器,不一致版本的 CSS 前缀。

首先安装 postcss-loader 和 autoprefixer(自动添加前缀的插件),安装到你的项目中.
npm install --save-dev postcss-loader autoprefixer

编写制定 webpack.config.js 文件配置 module 选项,添加 postcss-loader
处理样式表配置,编辑后的公文如下:

// webpack.config.js
module.exports = {
    entry: __dirname + '/src/main.js', // 入口文件路径文件所在的目录.
    output: {
        path: __dirname + '/dist/', // 存放打包后文件的路径
        filename: 'bundle.js'   // 打包后文件名
    },
    devtool: 'source-map', // 配置生成的source-map
    devServer: {
        contentBase: './dist',
        port: '9000',
        inline: true,
        historyApiFallback: true,
        open: true
    },
    module: {
        rules: [
            {
                test: /\.json$/,
                loader: 'json-loader'
            },
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/ // 编译打包时排除node_modules文件夹
            },
            {
                test: /\.css$/,
                // 此处结构需要做一下修改
                use: [
                    'style-loader', 'css-loader?modules&importLoaders=1',
                    {
                        loader: 'postcss-loader',
                        options: {
                            plugins: [
                                require('autoprefixer')
                            ]
                        }
                    }
                ]
            }
        ]
    }
};

在 webpack-cli 文件夹下新建 postcss.config.js 文件,添加如下代码:

// postcss.config.js
module.exports = {
    plugins: [
        // 调用autoprefixer插件,还可以配置选项添加需要兼容的浏览器版本.
        require("autoprefixer")[{ browsers: ['ie>=8', '>1% in CN'] }]
    ]
}

今天您写的体裁会自动依照 Can i use 里的数额增进分裂前缀了.在终极中运维npm start 命令重新编写翻译打包,终端输出新闻如下:

4858美高梅 27

在浏览器中开辟 dist 文件夹下的 index.html
文件,尽管看到和下图一律的,就认证已经成功安插了 PostCSS.

4858美高梅 28

对css文件进行打包,供给设置1些借助,style-loader、css-loader。

cnpm i webpac-dev-server@2 cross-env 
 -D
cnpm i html-webpack-plugin -D
//package.json.script
    "dev": "cross-env NODE_ENV=development webpack-dev-server --config webpack.config.js"

// 代码
const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')

const isDev = process.env.NODE_ENV === 'development'

const config = {
  target: 'web',
  resolve: {
    alias: {
      '@assets':path.join(__dirname, 'src/assets')
    }
  },
  entry: path.join(__dirname, 'src/index.js'),
  output: {
    filename: 'bundle.js',
    path: path.join(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.vue$/, 
        loader: 'vue-loader'
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.styl$/,
        use: [
          'style-loader',
          'css-loader',
          'stylus-loader'
        ]
      },
      {
        test: /\.(jpg|png|svg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192,
              name: '[name]-kay.[ext]'
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: isDev ? '"development"' : '"production"'
      }
    }),
    new HtmlWebpackPlugin()
  ]
}

if (isDev) {
  config.devServer = {
    port: 8001,
    host: '0.0.0.0',
    overlay: {
      errors: true
    }
  }
}

module.exports = config
// 终端输入 npm run dev启动项目

插件(Plugins)

插件(Plugins)是用来拓展 Webpack
功能的,它会在全体营造进度中生效,执行相关的职责。 Loaders 和 Plugins
日常被弄混,可是她们实际上是截然两样的事物,能够这么说,Loaders
是在包装构建进度中用来处理源文件的(JSX,Scss,Less..),一次拍卖三个;插件并不直接操作单个文件,它平素对全体构建进程其功能。

Webpack
有过多放置插件,同时也有不少第2方插件,能够让大家做到特别丰硕的作用。

行使插件的法子)使用插件的法子

4858美高梅 ,要选用某些插件,大家须要经过 npm 安装它,然后要做的就是在 Webpack
配置中的 Plugins 关键字部分添加该插件的一个实例.

编辑 webpack.config.js 文件配置 Plugins 选项,添加二个落到实处版权声明的
BannerPlugin 插件,BannerPlugin 是置于插件不要求动用 npm 安装.
编排后的公文如下:

// webpack.config.js
var webpack = require('webpack');
module.exports = {
    entry: __dirname + '/src/main.js', // 入口文件路径文件所在的目录.
    output: {
        path: __dirname + '/dist/', // 存放打包后文件的路径
        filename: 'bundle.js'   // 打包后文件名
    },
    devtool: 'source-map', // 配置生成的source-map
    devServer: {
        contentBase: './dist',
        port: '9000',
        inline: true,
        historyApiFallback: true,
        open: true
    },
    module: {
        rules: [
            {
                test: /\.json$/,
                loader: 'json-loader'
            },
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/ // 编译打包时排除node_modules文件夹
            },
            {
                test: /\.css$/,
                // 此处结构需要做一下修改
                use: [
                    'style-loader', 'css-loader?modules&importLoaders=1',
                    {
                        loader: 'postcss-loader',
                        options: {
                            plugins: [
                                require('autoprefixer')
                            ]
                        }
                    }
                ]
            }
        ]
    },
    plugins: [
        new webpack.BannerPlugin('版权所有,侵权必究!!!')
    ]
};

在终端中运维 npm start 命令重新编译打包,在浏览器中打开 dist文件夹下的
index.html 文件,假若见到和下图一律的,就证实已经打响布置了 BannerPlugin
插件.

4858美高梅 29

npm install --save-dev style-loader css-loader
  • ### webpack-dev-server同盟vue热更替功用实现

常用插件

给大家推荐几个常用的插件

HtmlWebpackPlugin

本条插件的职能是依据多个简短的模板,帮您转移最终的 html
文件,这些文件中活动引用了你包装后的 JS
文件。每趟编写翻译都在文书名中插入二个不1的哈希值。

安装 HtmlWebpackPlugin 到你的项目中
npm install --save-dev html-webpack-plugin

在采取 HtmlWebpackPlugin 之前,须求对 webpack-cli 项目布局做壹些改变.
1. 移除 dist文件夹.

2. 在 src目录下,创设2个文本名叫 index.html
模板文件,在编写翻译进程中,HtmlWebpackPlugin 插件会遵照此模板生成最后的 html
页面,会自行添加所正视的 css、 js、favicon等文件.

index.html 模板文件代码如下:
// index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>webpack-cli</title>
</head>
<body>
    <div id="root"></div>
</body>
</html>

3. 在 webpack-cli 文件夹下新建三个 build
文件夹用来存放在最后的出口文件.

4. 编辑 webpack.config.js 文件配置 Plugins 选项,添加
HtmlWebpackPlugin 插件,修改 output 选项.编辑后的文书如下:

// webpack.config.js
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry: __dirname + '/src/main.js', // 入口文件路径文件所在的目录.
    output: {
        path: __dirname + '/build/',    // 存放打包后文件的路径
        filename: 'bundle.js'   // 打包后文件名
    },
    devtool: 'source-map', // 配置生成的source-map
    devServer: {
        contentBase: './build',
        port: '9000',
        inline: true,
        historyApiFallback: true,
        open: true
    },
    module: {
        rules: [
            {
                test: /\.json$/,
                loader: 'json-loader'
            },
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/ // 编译打包时排除node_modules文件夹
            },
            {
                test: /\.css$/,
                // 此处结构需要做一下修改
                use: [
                    'style-loader', 'css-loader?modules&importLoaders=1',
                    {
                        loader: 'postcss-loader',
                        options: {
                            plugins: [
                                require('autoprefixer')
                            ]
                        }
                    }
                ]
            }
        ]
    },
    plugins: [//在这个数组中new一个实例就可以了
        new webpack.BannerPlugin('版权所有,侵权必究!!!'),
        new HtmlWebpackPlugin({
            template: __dirname + '/src/index.html' // new一个插件的实例,并传入相关的参数
        })
    ]
};

此刻项目组织如下图所示:

4858美高梅 30

在顶峰中运行 npm start 命令重新编写翻译打包,终端输出新闻如下:

4858美高梅 31

那儿项目协会已经发出转移,build
文件夹下存放了最后的输出的文件,项目结构如下图所示:

4858美高梅 32

在浏览器中开拓 build 文件夹下的 index.html
文件,倘诺见到和下图一律的,就表达已经打响安顿了 HtmlWebpackPlugin 插件.

4858美高梅 33

 

使用webpack.HotModuleReplacementPlugin和webpack.NoEmitOnErrorsPlugin
配置devServer.hot = true
css热更替使用vue-style-loader代替style-loader

Hot Module Replacement

Hot Module Replacement(HMKoleos)也是 Webpack
里很有用的二个插件,它同意你在改动组件代码后,自动刷新实时预览修改后的成效。
在 Webpack 中采用 HMCRUISER 也很简单,只须要做两项配置.

  1. 在 Webpack 配置文件中添加 HM陆风X8 插件
  2. 在 Webpack Dev Server 中添加 hot 参数

只是配置完这一个后,JS 模块其实还是不能够自动热加载的,还须要在你的 JS
模块中执行贰个 Webpack 提供的 API 才能落到实处热加载,即使这几个 API
简单使用,然而假设是 React 模块,使用大家早就深谙的 Babel
可以更方便人民群众的实现效益热加载。

然后在webpack.config.js中加入module配置:

if (isDev) {
  config.devServer = {
    port: 8001,
    host: '0.0.0.0',
    overlay: {
      errors: true
    },
    hot: true
  }
  config.plugins.push(
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin()
  )
}

重新整建下思路,具体落到实处情势如下

  1. 贝布el 和 Webpack
    是独立的工具,二者能够联手干活,二者都可以通过插件实行效率.
  2. HM酷路泽 是三个 Webpack
    插件,它让你能浏览器中实时观望模块修改后的成效,不过只要您想让它工作,需求对模块举行额外的分配的定额.
  3. Babel 有四个叫做 react-transform-hrm 的插件,能够在分裂 React
    模块举行额外的安顿下让 HM宝马X5 符合规律工作.

编写 webpack.config.js 文件配置 Plugins / devServer 选项,添加 Hot Module
Replacement 插件.编辑后的公文如下:

// webpack.config.js
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry: __dirname + '/src/main.js', // 入口文件路径文件所在的目录.
    output: {
        path: __dirname + '/build/',    // 存放打包后文件的路径
        filename: 'bundle.js'   // 打包后文件名
    },
    devtool: 'source-map', // 配置生成的source-map
    devServer: {
        port: '9000',
        inline: true,
        historyApiFallback: true,
        open: true,
        hot: true // 热加载
    },
    module: {
        rules: [
            {
                test: /\.json$/,
                loader: 'json-loader'
            },
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/ // 编译打包时排除node_modules文件夹
            },
            {
                test: /\.css$/,
                // 此处结构需要做一下修改
                use: [
                    'style-loader', 'css-loader?modules&importLoaders=1',
                    {
                        loader: 'postcss-loader',
                        options: {
                            plugins: [
                                require('autoprefixer')
                            ]
                        }
                    }
                ]
            }
        ]
    },
    plugins: [//在这个数组中new一个实例就可以了
        new webpack.BannerPlugin('版权所有,侵权必究!!!'),
        new HtmlWebpackPlugin({
            template: __dirname + '/src/index.html' // new一个插件的实例,并传入相关的参数
        }),
        new webpack.HotModuleReplacementPlugin() // 热加载插件
    ]
};

编纂 webpack-cli 文件夹下的 package.json 文件 scripts 选项,添加 –hot
选项开启代码热替换.

// package.json
{
  "name": "webpack-cli",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack",
    "dev": "webpack-dev-server --devtool eval --progress --content-base build --hot"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^7.1.6",
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-es2015": "^6.24.1",
    "css-loader": "^0.28.7",
    "html-webpack-plugin": "^2.30.1",
    "json-loader": "^0.5.7",
    "postcss-loader": "^2.0.8",
    "style-loader": "^0.19.0",
    "webpack": "^3.8.1",
    "webpack-dev-server": "^2.9.3"
  }
}

在顶峰中实行 npm run dev
命令,输出音讯如下图,1样能够运行自动热加载.浏览器打开界面如下图:

4858美高梅 34

4858美高梅 35

module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    {
                        loader: 'style-loader'
                    },{
                        loader: 'css-loader'
                    }
                ]
            }
        ]
    },
  • ### 配置source-map方便调节和测试

出品阶段的营造

咱俩早就使用 Webpack
构建了3个整机的付出环境.但是在产品阶段,恐怕还要求对包裹的文书进行额外的拍卖,比如说优化、压缩、缓存以及分离
CSS 和 JS.

对此复杂的类型以来,需求复杂的配备,那时候分解配置文件为四个小的文书可以使得业务层次明显,以
webpack-cli 项目以来,大家在 webpack-cli 文件夹下创制3个名字为webpack.prod.config.js 的文件,在其间添加基本的配置代码,如下:

// webpack.prod.config.js
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry: __dirname + '/src/main.js', // 入口文件路径文件所在的目录.
    output: {
        path: __dirname + '/build/',    // 存放打包后文件的路径
        filename: 'bundle.js'   // 打包后文件名
    },
    module: {
        rules: [
            {
                test: /\.json$/,
                loader: 'json-loader'
            },
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/ // 编译打包时排除node_modules文件夹
            },
            {
                test: /\.css$/,
                // 此处结构需要做一下修改
                use: [
                    'style-loader', 'css-loader?modules&importLoaders=1',
                    {
                        loader: 'postcss-loader',
                        options: {
                            plugins: [
                                require('autoprefixer')
                            ]
                        }
                    }
                ]
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: __dirname + '/src/index.html' // new一个插件的实例,并传入相关的参数
        })
    ]
};

编写 webpack-cli 文件夹下的 package.json 文件 scripts 选项,添加 build
选项,编辑后的文本如下:

// package.json
{
  "name": "webpack-cli",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack",
    "dev": "webpack-dev-server --devtool eval --progress --content-base build --hot",
    "build": "webpack --config ./webpack.prod.config.js --progress"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^7.1.6",
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-es2015": "^6.24.1",
    "css-loader": "^0.28.7",
    "html-webpack-plugin": "^2.30.1",
    "json-loader": "^0.5.7",
    "postcss-loader": "^2.0.8",
    "style-loader": "^0.19.0",
    "webpack": "^3.8.1",
    "webpack-dev-server": "^2.9.3"
  }
}

在终极中施行 npm run build 命令,输出新闻如下图:

4858美高梅 36

证实解释配置文件为八个小的文件成功了.

 

优化插件

Webpack 提供了部分在颁发等级相当实惠的优化插件,它们大多来自于 Webpack
社区,能够由此 npm 安装,通过以下插件能够实现产品宣布阶段所需的功效.

OccurrenceOrderPlugin: 为组件分配 ID,通过这些插件 Webpack
能够分析和优先思虑动用最多的模块,并为它们分配最小的 ID.
UglifyJsPlugin:压缩JS代码.
ExtractTextPlugin:分离 CSS 和 JS 文件.
笔者们来探视如何行使它们,OccurrenceOrderPlugin 和 UglifyJS plugins
都是松开插件,大家只供给设置 ExtractTextPlugin 插件.

安装 ExtractTextPlugin 插件
npm install --save-dev extract-text-webpack-plugin

编写 webpack.config.js 文件配置 Plugins 选项,添加那多少个插件,因为要分别
css 所以还要配置 module 下的 loaders 选项.编辑后的文书如下:

// webpack.config.js
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
    entry: __dirname + '/src/main.js', // 入口文件路径文件所在的目录.
    output: {
        path: __dirname + '/build/',    // 存放打包后文件的路径
        filename: 'bundle.js'   // 打包后文件名
    },
    devtool: 'source-map', // 配置生成的source-map
    devServer: {
        port: '9000',
        inline: true,
        historyApiFallback: true,
        open: true,
        hot: true // 热加载
    },
    module: {
        rules: [
            {
                test: /\.json$/,
                loader: 'json-loader'
            },
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/ // 编译打包时排除node_modules文件夹
            },
            {
                test: /\.css$/,
                // 此处结构需要做一下修改
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: 'css-loader?modules!postcss-loader'
                })
            }
        ]
    },
    plugins: [//在这个数组中new一个实例就可以了
        new webpack.BannerPlugin('版权所有,侵权必究!!!'),
        new HtmlWebpackPlugin({
            template: __dirname + '/src/index.html' // new一个插件的实例,并传入相关的参数
        }),
        new webpack.HotModuleReplacementPlugin(), // 热加载插件
        new webpack.optimize.OccurrenceOrderPlugin(),
        new webpack.optimize.UglifyJsPlugin(),
        new ExtractTextPlugin('style.css')
    ]
};

在巅峰中举行 npm start 命令,输出音信如下图:

4858美高梅 37

此刻项目结构已经发生改变,build 文件夹下多出了抽离出来的 style.css
文件还有相应的 style.css.map 文件,项目结构如下图所示:

4858美高梅 38

1经您打开 build 文件夹下的 bundle.js 文件,就能够看到 bundle.js
文件内容已经被核减处理了.

证实那四个插件已经安插成功了.

此处的use有二种配备格局,你也足以依照自个儿的喜好写,比如
use:[‘style-loader’,’css-loader’]

config.devtool = '#cheap-module-eval-source-map'

缓存

为了加速加载速度,合理的行使缓存是不可或缺的.使用缓存的最棒形式是承接保险文件名和文书内容是相称的.内容变更,名称也呼应改变.

Webpack
能够把一个哈希值添加到打包文件的文件名中,添加特殊的字符串混合体([name],
[id] and [hash])到输出文件名前,便于修改 BUG
未来,对应立异用户本地的缓存文件.

编写制定 webpack.config.js 文件修改 output / plugins 选项.编辑后的文件如下:

// webpack.config.js
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
    entry: __dirname + '/src/main.js', // 入口文件路径文件所在的目录.
    output: {
        path: __dirname + '/build/',    // 存放打包后文件的路径
        filename: '[name]-[hash].js'    // 打包后文件名
    },
    devtool: 'source-map', // 配置生成的source-map
    devServer: {
        port: '9000',
        inline: true,
        historyApiFallback: true,
        open: true,
        hot: true // 热加载
    },
    module: {
        rules: [
            {
                test: /\.json$/,
                loader: 'json-loader'
            },
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/ // 编译打包时排除node_modules文件夹
            },
            {
                test: /\.css$/,
                // 此处结构需要做一下修改
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: 'css-loader?modules!postcss-loader'
                })
            }
        ]
    },
    plugins: [//在这个数组中new一个实例就可以了
        new webpack.BannerPlugin('版权所有,侵权必究!!!'),
        new HtmlWebpackPlugin({
            template: __dirname + '/src/index.html' // new一个插件的实例,并传入相关的参数
        }),
        new webpack.HotModuleReplacementPlugin(), // 热加载插件
        new webpack.optimize.OccurrenceOrderPlugin(),
        new webpack.optimize.UglifyJsPlugin(),
        new ExtractTextPlugin('[name]-[hash].css')
    ]
};

在终极中执行 npm start 命令,输出音信如下图:

4858美高梅 39

那会儿项目 build 文件夹下的 main.css 和 main.js
文件都对应的丰硕了哈希值.项目组织如下图所示:

4858美高梅 40

若是你打开 build 文件夹下的 index.html 文件,就足以观望引用的 css、js
文件名也对应产生了变动,那样修改 BUG 未来,也能对应创新用户本地的缓存文件.

接下来开展打包,那一年css打包在index.js文件中,如若要把css文件从js文件中分离出来,那个时候就须求动用mini-css-extract-plugin,这一个插件必要webpack版本在四.四.0之上,从前是extract-text-webpack-plugin那几个插件。

  • 配置jsx和postcss
    安装postcss-loader, autoprefixer babel-loader,
    babel-core,babel-preset-env,
    babel-plugin-transform-vue-jsx,babel-plugin-syntax-jsx,
    (babel-helper-vue-jsx-merge-props)
    统一cnpm安装下
    创建/.babelrc, /postcss.config.js并分别安插

进阶,永不止步

实在到此地自身的那篇 Webpack 二.x
的入门实战已经收尾了!但那也只是个入门而已!在其实项目中应用依然不够的,还有好多细节作者并没浓密讲,所以大家还想进阶的话提出能够去探访
webpack-china
的文档.
除此以外实战项目 webpack-cli
的源码
,笔者早已松开Github 上去了,欢迎大家提意见.
再有有个别作者觉着很重大,要学会看控制台出口信息,能够看控制台出口新闻解决的标题,就不要上
谷歌(Google) 搜了!

npm install --save-dev mini-css-extract-plugin

 

// .babelrc
{
  "presets":[
    "env"
  ],
  "plugins": [
    "transform-vue-jsx"
  ]
}
// postcss.config.js
const autoprefixer = require('autoprefixer')
module.exports = {
  plugins: [
    autoprefixer()
  ]
}
// 在devServer里添加babel-loader和postcss-loader
{
        test: /\.js$/,
        loader: 'babel-loader'
      },
      {
        test: /\.jsx$/,
        loader: 'babel-loader'
      },
{
        test: /\.styl$/,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              sourceMap: true
            }
          },
          'stylus-loader'
        ]
      },

相关配置如下:

  • ### 测试jsx-vue模板

4858美高梅 41

新建/src/views/test.jsx

下一场在展开打包,在dist文件夹下生成了css文件,内容如下:

export default {
  data () {
    return {
      test: '这是用jsx语法写的vue模板'
    }
  },
  render () {
    return (
      <div>
        {this.test}
      </div>
    )
  }
}

4858美高梅 42

  • ### css文件分别打包成独立文件

迄今截至css与js分离操作成功!

使用extract-text-webpack-plugin
分开打包供给区分环境,删除config目录上的stylus-loader,
并在相应环境下对应loader配置
/webpack.config.js重写后布置如下

 有诸多的小伙伴肯定也有用less、sass、stylus那两种css预处理语言,在那边自个儿也拿里面包车型大巴1种stylus来做二个布局。顺便使用postcss

const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const ExtartTextPlugin = require('extract-text-webpack-plugin')

const isDev = process.env.NODE_ENV === 'development'

const config = {
  target: 'web',
  resolve: {
    alias: {
      '@assets':path.join(__dirname, 'src/assets')
    }
  },
  entry: path.join(__dirname, 'src/index.js'),
  output: {
    filename: 'bundle.js',
    path: path.join(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.vue$/, 
        loader: 'vue-loader'
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.jsx$/,
        loader: 'babel-loader'
      },
      {
        test: /\.(jpg|png|svg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192,
              name: '[name]-kay.[ext]'
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: isDev ? '"development"' : '"production"'
      }
    }),
    new HtmlWebpackPlugin()
  ]
}

if (isDev) {
  config.module.rules.push({
    test: /\.styl$/,
    use: [
      'style-loader',
      'css-loader',
      {
        loader: 'postcss-loader',
        options: {
          sourceMap: true
        }
      },
      'stylus-loader'
    ]
  })
  config.devtool = '#cheap-module-eval-source-map'
  config.devServer = {
    port: 8001,
    host: '0.0.0.0',
    overlay: {
      errors: true
    },
    hot: true
  }
  config.plugins.push(
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin()
  )
} else {
  config.module.rules.push({
    test: /\.styl$/,
    use: ExtartTextPlugin.extract({
      fallback: "style-loader",
      use: [
        'css-loader',
        {
          loader: 'postcss-loader',
          options: {
            sourceMap: true
          }
        },
        'stylus-loader'
      ]
    })
  })
  config.plugins.push(
    new ExtartTextPlugin({
      filename: 'style.[contenthash:8].css'
    })
  )
}

module.exports = config
  • autoprefixer为 CSS
    中的属性添加浏览器特定的前缀。先介绍一下postcss:PostCSS
    自己是2个效应相比单纯的工具。它提供了壹种方式用 JavaScript 代码来处理
    CSS。它承受把 CSS 代码解析成肤浅语法树结构(Abstract Syntax
    Tree,AST),再交由插件来拓展处理。PostCSS最为常用的插件是Autoprefixer,其功能是为
    CSS 中的属性添加浏览器特定的前缀。Autoprefixer
    能够依照要求钦命协助的浏览器类型和版本,自动添加所需的带前缀的属性申明。开发职员在编制CSS 时只需要使用 CSS 规范中的标准属性名即可。
  • ### 单独打包类库文件, 完毕缓存优化品质

第贰安装正视:

修改线上环境entry选项应用options方式为js文件添加name属性app和vendor
->
是output中[name]的由来,将付出条件的output.filename修改为’bundle.[hash:8].js’,
标准环境修改为: ‘[name].[chunkhash:8].js'(无法使用hash,
webpack-dev-server会报错)
hash和chunkhash的区别:使用hash会让app和vendor的hash码一样是整个应用的hash(如果某个js文件改变了, 说有js文件的hash也会跟着改变, 正式环境就 没有意义了), 而chunkhash是每一个模块或者说节点单独生成hash,
使用
webpack.optimize.CommonsChunkPlugin({name: ‘vendor’})
独自打包webpack相关的js代码:(好处是在有新的模块加入时候,
webpack会给模块加id, 固然在中间插入会改变从前代码的id,
那样会造成hash变化破坏缓存, 须求独自包装)vendor必须在runtime之前
使用webpack.optimizeCommonsChunkPlugin({name: ‘runtime’})
/webpack.config.js修改为:

npm install --save-dev stylus stylus-loader
const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const ExtartTextPlugin = require('extract-text-webpack-plugin')

const isDev = process.env.NODE_ENV === 'development'

const config = {
  target: 'web',
  resolve: {
    alias: {
      '@assets':path.join(__dirname, 'src/assets')
    }
  },
  entry: path.join(__dirname, 'src/index.js'),
  output: {
    filename: 'bundle.[hash:8].js',
    path: path.join(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.vue$/, 
        loader: 'vue-loader'
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.jsx$/,
        loader: 'babel-loader'
      },
      {
        test: /\.(jpg|png|svg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192,
              name: '[name]-kay.[ext]'
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: isDev ? '"development"' : '"production"'
      }
    }),
    new HtmlWebpackPlugin()
  ]
}

if (isDev) {
  config.module.rules.push({
    test: /\.styl$/,
    use: [
      'style-loader',
      'css-loader',
      {
        loader: 'postcss-loader',
        options: {
          sourceMap: true
        }
      },
      'stylus-loader'
    ]
  })
  config.devtool = '#cheap-module-eval-source-map'
  config.devServer = {
    port: 8001,
    host: '0.0.0.0',
    overlay: {
      errors: true
    },
    hot: true
  }
  config.plugins.push(
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin()
  )
} else {
  config.entry = {
    app: path.join(__dirname, 'src/index.js'),
    vendor: ['vue']
  }
  config.output.filename = '[name].[chunkhash:8].js'
  config.module.rules.push({
    test: /\.styl$/,
    use: ExtartTextPlugin.extract({
      fallback: "style-loader",
      use: [
        'css-loader',
        {
          loader: 'postcss-loader',
          options: {
            sourceMap: true
          }
        },
        'stylus-loader'
      ]
    })
  })
  config.plugins.push(
    new ExtartTextPlugin({
      filename: 'style.[contenthash:8].css'
    }),
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor'
    }),
    new webpack.optimize.CommonsChunkPlugin({
      name: 'runtime'
    })
  )
}

module.exports = config

 

  • ### 生成环境压缩js

跟着安装postcss依赖:

使用webpack.optimize.UglifyJsPlugin()并配置options.compress.warnings =
false, options.output.comments: false

npm install --save-dev postcss postcss-loader autoprefixer
if(isDev) {
  ...
} else {
  ...
config.plugins.push(
    new ExtartTextPlugin({
      filename: 'style.[contenthash:8].css'
    }),
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor'
    }),
    new webpack.optimize.CommonsChunkPlugin({
      name: 'runtime'
    }),
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
      },
      output: {
        comments: false
      }
    })
  )
}

 

  • ### 生成环境压缩css

设置好这几个信赖之后,就在目录下创制以下文件,如图:

  1. 安装optimize-css-assets-webpack-plugin@3
  2. 计划生成环境插件

4858美高梅 43

文件之中的内容如下:

new OptimizeCssAssetsPlugin({
        assetNameRegExp: /\.css$/,
        cssProcessor: require('cssnano'),
        cssProcessorOptions: { discardComments: { removeAll: true } },
        canPrint: true
      })
box.styl内容:

.box {
    display flex
    width 400px
    height 400px
    border 1px solid #000000
    transform rotate(45deg)
    p{
        color red
        font-size 14px
    }
}

postcss.config.js:

module.exports = {
    plugins: [
        require('autoprefixer')
    ]
}

那壹份简单webpack配置, 能够让vue跑起来, 不过远远不够, 接下来还会更新,
能够安插上线的配置和ssr服务器端渲染的配置
wepack从0开始布署vue环境之贰:
线上配备布署优化
github地址能够下载源码来研究

 

狠抓以上准备之后,该在webpack.config.js文件之中进行stylus解析配置了:

module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    {loader: MiniCssExtractPlugin.loader},
                    'css-loader'
                ]
            },{
                test: /\.styl$/,
                use: [
                    {loader: MiniCssExtractPlugin.loader},
                    'css-loader',
                    'postcss-loader',
                    'stylus-loader'
                ]
            }
        ]
    }
//在此说明一下:因为是要对stylus文件里面的样式添加浏览器特定的前缀,所以需要在这里面引入postcss-loader进行解析,而且这几种loader的配置顺序不能颠倒,不然会产生错误或者达不到目的。我自己就尝试了把postcss-loader放在最后,解析就会出错。也算是一种小坑。

 

然后开始展览webpack打包,生成了之类:

4858美高梅 44

那时你也会发觉,不管是stylus文件还是.css文件,都会卷入到一同,生成二个文本。

4、图片打包。

在src目录下开创文件夹images,并且添加一张图纸,首先以背景图片的措施引进图片

4858美高梅 45

下一场安装正视

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

 

然后在module里面这么计划:

       {
              test: /\.(png|jpg|gif)/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 5000,//如果小于则以base64位显示,大于这个则以图片路径显示
                            outputPath: 'images/'//让图片都打包到images文件夹下
                        }
                    }
                ]
            }

 

此时打包出来后,在dist下会师世一个images文件夹:

4858美高梅 46

那时打包是打响了,然则打开本地服务之后,发现图片的路子有标题。那其间纵使有个坑。那一年就须要缓解静态财富的路劲难题。如下:

webpack.config.js

let website = {
    publicPath: 'http://192.168.27.21:8080/'//这个就是本地监听服务
}

output: {
        path: path.resolve(__dirname,'dist'),
        filename: '[name].js',
        publicPath: website.publicPath//解决静态路径的问题,比如图片的路径
    },

 

图形在html中还有另1种写法

<body>
    <div id="title"></div>
    <div class="box">
        <p>这里是box里面的内容</p>
    </div>
    <div class="wrap"></div>
    <img src="./images/none.png" />
</body>

 

1经须要对里面包车型地铁图片打包到images/文件夹下,就须求选择三个插件html-withimg-loader

npm install --save-dev html-withimg-loader

{
          test: /\.(htm|html)$/i,
          use: ['html-withimg-loader']//这个插件是让html里面的图片打包到images/文件夹下
 }

 

包裹后生成的始末是:

<body>
    <div id=title></div>
    <div class=box>
        <p>这里是box里面的内容</p>
    </div>
    <!-- <div class="wrap"></div> -->
    <img src=http://192.168.27.21:8080/images/3ae16dcddacdf7d99b869750401202fb.png>
<script type=text/javascript src=http://192.168.27.21:8080/index.js?2735cd9759ec100ecd6f></script></body>

 

五、es陆语法转化babel配置

最近babel-loader的版本都捌.0.0了,其余信赖配置都产生了1部分变更,由原先版本的bebel-core
、babel-preset-env、babel-preset-react、babel-preset-es20一5到现行反革命的 @babel/core、@babel/preset-env、@babel/preset-es201伍、@babel/preset-react

npm install --save-dev babel-loader 
npm install --save-dev @babel/core  @babel/preset-env @babel/preset-react

 

//webpack.config.js

           {
                test: /\.(jsx|js)$/,
                use: [
                    {
                        loader: 'babel-loader',
                    }
                ],
                exclude: /node_modules/
            }

 

//创建.babelrc文件

{
    "presets": [
        "@babel/preset-env",
        "@babel/preset-react"
    ]
}

 

这么就能够了。打包之后就能够见见成效。

陆、环境布置

package.json

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "server": "webpack-dev-server",
    "dev": "set type=dev&webpack",
    "build": "set type=pro&webpack"
  },

webpack.config.js
if(process.env.type=="dev"){//本地环境
    var website = {
        publicPath: 'http://192.168.27.21:8080/'
    }
}else{
    var website = {
        publicPath: 'http://*****' //你的线上地址
    }
}

 

7、总结

如上正是2个webpack的布署详情,基本上够用了,自身写的可比啰嗦,有个别地点写的不得了的,麻烦留言帮自个儿指正,多谢!也意在各位给自己有的鞭策。不吝赐教。

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有