webpack运行配置(1)

webpack特点

- webpack本质上是nodejs的一个包,所以webpack是基于node.exe来运行的
- 想要运行webpack就必须要安装node.exe
- webpakc是在开发阶段要被程序员使用的,但是在生成环节中是用不到的(生产环节已经打包压缩好了)

如何安装webpack

  • 安装node.exe的同事会自动安装好npm 包管理工具
  • npm 包这个管理器下载的包是来源于国外,所以速度回很慢,甚至出错
    所以我们使用国内taobao开发的一个cnpm来替代npm的使用

使用webpack之前的准备工作

  • 安装node环境
  • npm install cnpm -g 将cnpm全局安装(使任何地方都可以使用)
  • cnpm install webpack -g 将webpack安装成为全局包
  • cnpm install webpack --save-dev 当前项目根目录安装webpack,给当前项目使用
  • npm init -y 当前项目根目录初始化npm,会有package.json
  • 如果运行 webpack 执行webpack.config.js
  • 如果要执行webpack.develop.config.js,就运行webpack --config
    webpack.develop.config.js,当然也可以在package.json中设置
{
  "name": "01webpack",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
  //可以直接命令运行npm run develop 来执行webpack.develop.config.js文件
    "develop": "webpack --config webpack.develop.config.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-loader": "^7.1.0",
    "less": "^2.7.2",
    "less-loader": "^4.0.4",
    "node-sass": "^4.5.3",
    "sass-loader": "^6.0.6",
    "webpack": "^3.0.0",
    "webpack-dev-server": "^2.5.0"
  }
}

学习nodejs的模块化开发(main.js依赖calc.js写法)

    1、在nodejs中一切.js文件都可以是一个模块
    2、calc.js
        function add(x,y){return x + y;}
        module.exports = add;

    3、main.js使用calc.js中的add方法
        导calc.js模块
        // webpack的入口文件
var add = require('./calc.js');
// console.log(add(2,3));
// 获取到页面上面所有dom对象
var v1obj = document.getElementById('v1');
var v2obj = document.getElementById('v2');
var btobj = document.getElementById('bt');
var resobj = document.getElementById('res');
btobj.onclick = function(){
    // 实现一个加法功能
    var v1Val = (v1obj.value - 0);
    var v2Val = (v2obj.value - 0);

    resobj.value = add(v1Val,v2Val);
}   

webpack的基本使用方式

  • 第一种使用方式:webpack 入口文件.js的路径 输出文件.js的路径
    在当前要打包的入口.js文件的位置打开cmd ,输入 webpack 入口文件.js  输出文件.js 

  • 第二种使用方式:webpack 结合 webpack.config.js 配置文件进行打包
    目的:在cmd面板中直接利用  webpack指令即可进行打包,
    特点:如果直接指向 webpack 指令,webpack指令会自动去查找当前目录下的webpack.config.js文件
    
    编写步骤:
    1、webpack.config.js中定义入口文件和输出文件的 内容
    module.exports={
        entry:path.resolve(__dirname,'src/main.js'), ---main.js的路径
        output: {
            path: path.resolve(__dirname, 'dist'), ---自己创建的dist文件夹,用来放bundle.js
            filename: 'bundle.js',  
      },

    2、在与webpack.config.js文件相同的目录下打开cmd,执行webpack即可完成打包

利用webpack完成 css文件的打包

  • 利用webpack完成 css文件的打包
    注意点:webpack是利用style-loader和css-loader这两个nodejs的包来完成.css文件的打包工作
    步骤:
    1、cnpm i style-loader css-loader 安装本地包
    style-loader与css-loader会依赖于其他的很多包,所以一般我们在将这个项目文件发送给其他人使用的时候,是要删除 node_modeuls这个文件夹的,这时候就有可能不知道这个项目中依赖于哪些第三方包

          解决方案:
          node.exe中提供了一个 package.json文件用来存放当前安装的所有包,
          这些包分为:
          1、开发阶段使用的包      cnpm i 包名称 --save-dev
           --save-dev对应的是package.json devDependencies节点
          2、生产环境阶段使用的包  cnpm i 包名称 --save
              --save对应的是package.json dependencies节点
    
          保存的步骤:
          1、利用 cnpm init 来生成一个 package.json文件
          2、cnpm i style-loader css-loader  --save-dev
    
      2、将style-loader与css-loader配置在 webpack.config.js中,webpack才能使用这两个loader文件
           webpack.config.js中定义入口文件和输出文件的 内容(见最后webpack.config.js的配置)
    

利用webpack完成 sass文件的打包

步骤:
1、cnpm install sass-loader node-sass --save-dev
2、sass-loader 在webpack.config.js中增加一个 loader节点

注意点: sass文件的打包依赖于 sass-loader 解析成原生的 .css语法
所以要最终打包成功就必须要依赖于style-loader css-loader 
所以在配置 sass的时候,
style-loader!css-loade!sass-loader

{
            test:/\.scss$/,   //表示当前要打包的文件的后缀正则表达式
            loader:'style-loader!css-loader!sass-loader' //实现sass文件的打包
}

利用webpack完成 less文件的打包

步骤:
1、cnpm install less-loader less  --save-dev
2、less-loader 在webpack.config.js中增加一个 loader节点
    注意点: 在配置 loader:'' 对应的loader的时候,要
   按照 style-loader!css-loade!less-loader 配置

利用webpack完成 url()导入资源文件的打包

例如需求:
    background-image: url(../imgs/home.png)
    那么webpack必须利用 url-loader 这个包去解析,而url-loader依赖file-loader,所以
    步骤:
    1、npm i url-loader file-loader --save-dev
    2、url-loader在webpack.config.js中增加一个 loader节点

利用webpack完成 es6转es5

    步骤:
    1、npm install babel-core babel-loader babel-preset-es2015 babel-plugin-transform-runtime --save-dev

     注意:babel-plugin-transform-runtime 安装是为了在后面能够正常编译.vue这个文件不出错

main.js配置

// webpack的入口文件
// 在此处main.js实现的是获取到dom对象,实现一个加法功能
var add = require('./calc.js');
// 导入site.css 以后webpack才能将site.css打包
require('./1.css');
require('./site1.scss');
require('./site2.less');
// console.log(add(2,3));
// 获取到页面上面所有dom对象
var v1obj = document.getElementById('v1');
var v2obj = document.getElementById('v2');
var btobj = document.getElementById('bt');
var resobj = document.getElementById('res');

btobj.onclick = function(){
    // 实现一个加法功能
    var v1Val = (v1obj.value - 0);
    var v2Val = (v2obj.value - 0);

    resobj.value = add(v1Val,v2Val);
}

webpack.config.js配置

var path = require('path');

module.exports = {
    entry:path.resolve(__dirname,'src/main.js'),
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js',
    },
  module:{
        loaders:[
            {
                // 将当前项目中所有的.js文件都要进行es6转es5操作,node_moudels除外
                test:/\.js$/,   //表示当前要打包的文件的后缀正则表达式
                // loader:'babel-loader?presets[]=es2015', //如果写到这里,将来在打包.vue文件的时候会报错,表示先利用css-loader解析.css文件,再调用style-loader打包
                loader:'babel-loader',
                exclude:/node_modules/ , //node_modules中的所有.js文件不去转换,提高打包性能
                
            },
            {
                // 打包css文件
                test:/\.css$/,   //表示当前要打包的文件的后缀正则表达式
                loader:'style-loader!css-loader' //表示先利用css-loader解析.css文件,再调用style-loader打包
            },
            {
                // 打包 sass文件
                test:/\.scss$/,   //表示当前要打包的文件的后缀正则表达式
                loader:'style-loader!css-loader!sass-loader' //实现sass文件的打包
            },
            {
                // 打包less文件
                test:/\.less$/,   //表示当前要打包的文件的后缀正则表达式
                loader:'style-loader!css-loader!less-loader' //实现sass文件的打包
            },
            {
                // 打包url()请求的资源文件
                test:/\.(png|jpg|gif|ttf)$/,   // 注意url可能请求多个资源,所以将来在项目中通过url导入的资源扩展名必须配置在这里
                // loader:'url-loader'  //这种配置会将图片变成一个base64的字符串存储到build.js中,如果图片很大的话,那么会造成build.js也比较大,加载的时候会导致效率低下
                loader:'url-loader?limit=40000' //限制图片的大小如果<40k则把他当做base64字符串存储到build.js中,如果>40k 则单独将图片存放到磁盘上,将路径打包进去bulid.js 
            }
        ]
    },
    babel:{
         presets: ['es2015'],  
         plugins: ['transform-runtime']  //这句代码就是为了解决打包.vue文件不报错
    }
}

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 202,056评论 5 474
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 84,842评论 2 378
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 148,938评论 0 335
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,296评论 1 272
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,292评论 5 363
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,413评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,824评论 3 393
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,493评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,686评论 1 295
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,502评论 2 318
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,553评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,281评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,820评论 3 305
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,873评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,109评论 1 258
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,699评论 2 348
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,257评论 2 341

推荐阅读更多精彩内容

  • 版权声明:本文为博主原创文章,未经博主允许不得转载。 webpack介绍和使用 一、webpack介绍 1、由来 ...
    it筱竹阅读 11,025评论 0 21
  • 无意中看到zhangwnag大佬分享的webpack教程感觉受益匪浅,特此分享以备自己日后查看,也希望更多的人看到...
    小小字符阅读 8,130评论 7 35
  • webpack 介绍 webpack 是什么 为什么引入新的打包工具 webpack 核心思想 webpack 安...
    yxsGert阅读 6,439评论 2 71
  • 学习流程 参考文档:入门Webpack,看这篇就够了Webpack for React 一. 简单使用webpac...
    Jason_Zeng阅读 3,101评论 2 16
  • 一朝一暮思君容,醉把爱恋埋心头; 一字一句吐心声,愿携君心永相随。
    沐日阅读 154评论 0 2