主干条件搭建,webpack基础打包安装分享

by admin on 2019年5月6日

简介

一. 先是步安装以前 先npm init 创制 package.json

  cnpm init;

  然后全局安装 cnpm install webpack -g
确定保证哪个地方都得以选拔

  cnpm install webpack –save-dev

  然后在当地品种里面安装依赖

  我们须求在类型中成立二个index.js文件,把它放到/src文件夹里。作者个人习于旧贯于把全体的静态能源(图片/字体/CSS等)存在3个文本夹里,本人写的代码存在/src文件夹内,而Computer生成的代码则会放在/build文件夹。大家并无需手动创设/build文件夹,能够让Webpack自动完毕将/src下的代码打包到/build的操作。在/src文件夹里我们得以先创制叁个名字为alert.js的文件。其它还索要在项指标根目录成立webpack.config.js配置文件。现在我们的种类协会大意上是底下这一个样子:

  必发88 1

  

1、成立webpack-first文件夹作为站点,创立app文件夹存放js原始模块(main.js
和 Greeter.js)
创造 public文件夹存放index.html和包装后的bundle.js文件

webpack是1款前端财富模块化管理和包裹工具,它能够将洋洋麻木不仁的模块依照应重和规则打包成符合生产遇到布署的前端财富。还足以将按需加载的模块进行代码分隔,等到实际需求的时候再异步加载。通过loader的转变,任何款式的财富都得以用作模块,比如Commonjs模块、英特尔模块、CSS、图片、JSON、Coffeescript、LESS等

一. 在webpack.config.js里面写最中央的配置

  module.exports = {

entry: './src',           //运行webpack之后会检查src下面的js文件

output: {

path: 'build',

filename: 'bundle.js',

},

};

  接下去大家在index.js里面引进 alert.js。
require(‘./alert.js’);

  在档期的顺序的根目录上边创制一个index.html 文件

  

  

<!DOCTYPE html>

  <html lang=”en”>

  <head>

    <meta charset=”UTF-8″>

  <title>Document
name</title>

  </head>

  <body>

    <h1>CSS Modules
demo</h1>

  <script src=”build/bundle.js”></script>     //这里的js正是全方位js入口
全数的静态财富文件都会因而webpack 配置文件进行 解析 成本人的js
 

  </body>

</html>

此间的bundle.js便是webpack打包之后会生成的公文。大家只必要在类型中运作webpack命令就足以改动它了。为了更有利一些,咱们能够在package.json中写上构建的本子:

  "scripts": {

//如果是Windows则改为

webpack && start index.html "start": "webpack && open index.html"

},

  之后在项指标命令行中输入npm
start命令

必发88 2

文档:webpack

3. 安顿加载器(loader)

   加载器(Loader)是webpack的使用中分外首要的壹部分。你能够把加载器看作1个小插件,在大家导入特定类型的文书时,对应的加载器就能起功效。

    npm i -D babel-loader babel-core babel-preset-es2015

 

  在根目录成立贰个.babelrc文书,在内部安装

  {

    ’presets’ : ‘[es2015]’

主干条件搭建,webpack基础打包安装分享。  }

  让Babel管理全体大家温馨编排的.js文件。注意安插好,不可能让Babel干扰一些可能会选拔的第1方库。修改webpack.config.js为如下内容:

  必发88 3

  加载器(Loader)配置中的test值用来合营对应的文件类型,include用来钦赐在哪些路线下该加载器生效。咱们先来测试一下Babel是还是不是曾经能在Webpack上卿常运作了。创立3个新的文书src/robot.js,写入以下内容:

  const  greetings = (text, person)
=> {

    return `${text}, ${person}. I
read you but I’m sorry, I’m afraid I can’t do that`;

  };

  export default greetings;

  大家如故要在 index.js 里面导入模块;
因为js是汇聚在那其中 在webpack 打包成 bundle.js的一有些

  import
greetings from ‘./robot.js’

  document.write(greetings(五个参数));

一、找到自个儿项指标目录
  npm install -g webpack //全局安装webpack

主干条件搭建,webpack基础打包安装分享。 

肆. 载入样式 

  再设置三个加载器 大家的连串模板大约就希图好了

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

   css-loader用来读取CSS文件,style-loader则承担管理并将样式加载到页面中。大家先创制src/app.css来测试一下

   .element {

    background-color: blue;

    color : white;

     }

  之后通过import语句导入到src/index.js文件中

  import styles from './app.css'.

  必发88 4

  

2、初始化package.json文件
  npm init
三、站点下安装webpack创建依赖
  npm install –save-dev webpack
4、编写Greeter.js文件

独自选取webpack

5. css-modules

  我们的代码特别显明,作者个人倾向于把CSS输出为单独的文件,而不是平昔嵌入HTML里面。为了贯彻这些须要,大家须要设置三个叫做extract
text
的 Wepack
插件。

  将载入的富有CSS模块输出为贰个独门的CSS文件。那样你的体制就未必和JS代码混淆在一道,而是转换3个单身的CSS打包文件。假设你的体裁文件体积不小的话,那种方法能够加速页面加载速度,因为样式文件能够和JS文件同时载入。

  安装插件 npm i -D extract-text-webpack-plugin;

    必发88 5

    最终在设置一下 webpack.config.js

      {

        test:
/\.css/,

        loader: ExtractTextPlugin.extract(‘css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]’),

      }

 

 

  module.exports=function(){
  var greet = document.createElement(“div”);
  greet.textContent = “Hi there and greetings”;
  return greet;
  }

壹、学习财富

  //module.exports将函数作为重临值,成为三个共享的模块,只要引进Greeter文件就会选取

webpack是一款模块加载器兼打包工具,它把各个能源,比如JS(含JSX)、ES陆、样式(含less/sass)、图片等都看成模块来采用和拍卖

5、编写main.js文件

其他的就学能源

  var greeter = require(“./Greeter.js”);
  document.getElementById(“root”).appendChild(greeter());

二、安装

  //引入require()—-Greeter.js模块 
  //获取html-dom元素将 调用的形式再次回到值 放在dom成分中

大局安装

陆、实施命令实行包装,

$npm install webpack -g

  webpack app/main.js public/bundle.js

必发88 6

  //全局安装webpack之后可以那样写, app/main.js是入口主文件
public/bundle.js是将该命 名空 
  间的公文打包到public中,约等于和html在多少个索引下。

三、配置

html文件代码:

创设webpack.config.js它的意义

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>第一个webpack练习</title>
</head>
<body>
<div id=”root”></div>
<script type=”text/javascript” src=”bundle.js”></script>
//调用的是包装后的bundle文件
</body>
</html>

  • entry:配置入口文件的地点,能够是10足入口,也得以是多入口。
  • output:配置出口文件的地址,在webpack2.X本子后,帮助多张嘴配置。
  • module:配置模块,首就算解析CSS和图纸转换压缩等成效。
  • plugins:配置插件,依据你的急需配备差别功用的插件。
  • resolve:用来设置路径指向
  • watch:监听新文件有退换后推行打包
    module.exports={
        //入口文件的配置项
        entry:{},
        //出口文件的配置项
        output:{
              path:"",
              filename:""    
        },
        //模块:例如解读CSS,图片如何转换,压缩
        module:{
           loaders:[
             {test:/\.js$/,loader:""}
           ]
        },
        //插件,用于生产模版和各项功能
        plugins:[],
        //用来设置路径指向
        resolve:{},
        //监听新文件有改动后执行打包
        watch:true
    } 
    

 

四、webpack命令试行打包

 

//直接运行webpack.config.js来打包
$webpack

 

 

 

接下去用多少个例证演示它的利用

二、像上述的艺术方法
假诺模块相比较多的话会很不便利,然后大家每趟都亟需实行入口文件,出口打包目录,很容 易出错。有未有怎么着轻巧的点子,让大家每趟打包都实施三个单词只怕更简便易行,一下正是方法:

1.例子demo1

  定义3个安顿文件,那个布局文件其实也是三个简短的JavaScript模块,能够把富有的与营造相关的音讯放在 里面。

咱俩先是来看一下选取webpack来完结打包:

  还是一连上边的例子来注脚怎样写这些布局文件,在近来演练文件夹的根目录下新建二个名字为 *webpack.config.js的文书,并在里面进展最最简便易行的安排,如下所示,它涵盖入口文件路径和存放打包后文件的地 ***

目录:

*方的路子。*

必发88 7

一、在webpack.config.js下这么安插
  module.exports = {

大家定义1个模块show.js

  entry: __dirname + “/app/main.js”,//已反复聊起的唯一入口文件

exports.show = function() {
    document.write("<div>我是写入的内容</div>")
}

  output: {

 

  path: __dirname + “/public”,//打包后的文本存放的地方

并在main.js中引用

  filename: “bundle.js”//打包后输出文件的文件名

var module = require("./show");
module.show();

  }

 

  }

webpack.config.js中的配置

 

module.exports = {
    entry: './module/main.js', //入口文件的地址
    output: {
        filename: './js/bundle.js'  //出口文件的地址
    },
    watch: true    //设为true监听文件  改动是自动执行打包

 }

注:“__必发88,dirname”是node.js中的三个全局变量,它指向当前进行脚本所在的目录。(若是该配置文件在app下那么指向app文件夹)

 

接下去在dos中跻身文件路径,实行打包命令webpack举办李包裹装(这里要先全局安装了webpack能力选用该命令打包(npm
install webpack -g))

必发88 8

然后大家见到目录自动加多了js文件夹及bundle.js

必发88 9

 

bundle.js为包装后的文本,大家得以在html中一向引用它而不用引用main.js和show.js,编写index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <script src="js/bundle.js"></script>  //直接引用bundle.js
</body>

</html>

开辟页面结果如下:

必发88 10

2.例子demo2

那边运用一下webpack的插件。引进CommonsChunkPlugin,这么些属于webpack内置的3个插件,须求在当前目录安装webpack。

意义:用于提取三个输入文件的共用脚本有的

当前目录下安装webpack

必发88 11

目录:

必发88 12

 

设置webpack.config.js

//首先引入webpack和CommonsChunkPlugin插件
var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");
var webpack = require("webpack");
module.exports = {
    entry: {
        bundle1: './module/page1.js',
        bundle2: './module/page2.js'
            //这里page1.js和page2.js里的公共部分会被放到下面的commons.js文件中
    },
    output: {
        filename: "./js/[name].js" //page1.js和page2.js不相同的部分就分别打包到bundle1.js和bundle2.js里
    },
    plugins: [
        new CommonsChunkPlugin("commons") //公共的脚本文件放在commons.js里
    ]
}

另1种写法

// var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");
var webpack = require("webpack");
module.exports = {
    entry: {
        bundle1: './module/page1.js',
        bundle2: './module/page2.js'
            //这里page1.js和page2.js里的公共部分会被放到下面的commons.js文件中
    },
    output: {
        filename: "./js/[name].js" //page1.js和page2.js不相同的部分就分别打包到bundle1.js和bundle2.js里
    },
    plugins: [
        // new CommonsChunkPlugin("commons")
        new webpack.optimize.CommonsChunkPlugin("commons") //公共的脚本文件放在commons.js里
    ]
}

 

我们定义3个show.js模块

exports.sum = function(a, b) {
    console.log(a + b);
}

 

 

分别在page1.js和page2.js中引入show.js模块

var show = require("./show");
alert(show.sum(5, 6));

var show = require("./show");
alert(show.sum(10, 10));

 它们的等同部分 var show = require(“./show”);
导入的show.js模块会被打包到commons.js中

 

 接下来在dos中跻身文件路线,推行打包命令webpack举行打包

必发88 13

卷入后目录如下,新扩展了bundle一.js,bundle2.js和commons.js文件

必发88 14

编写index1.html和index2.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>index1</title>
    <script src="./js/commons.js"></script>
    <!-- 先引用公共部分common.js -->
    <script src="./js/bundle1.js"></script>
</head>

<body>

</body>

</html>

<!DOCTYPE html>

<html lang=”en”>

<head>

<meta charset=”UTF-8″>

<meta name=”viewport” content=”width=device-width,
initial-scale=1.0″>

<meta http-equiv=”X-UA-Compatible” content=”ie=edge”>

<title>index2</title>

<script src=”./js/commons.js”></script>

<!– 先引用公共部分common.js –>

<script src=”./js/bundle2.js”></script>

</head>

<body>

</body>

</html>

 

运维结果:

index1.html的

必发88 15

 

index2.html的

必发88 16

 

 

以上正是前些天的读书内容

发表评论

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

网站地图xml地图