美文网首页
Webpack深入与实战

Webpack深入与实战

作者: shengwenjia | 来源:发表于2017-07-31 16:26 被阅读0次

      如果把项目开发的过程比作用积木搭房子的过程,Browserify:封装了各种各样的的小积木块,那怎么把这些积木块搭建成房子呢,这时需要用grunt或者gulp去把一个个task进行合并、检验、压缩,最后形成一所房子,这样的配置过程实在是太耗费时间、精力了。

     但是webpack的思想就不太一样,webpack直接就把用积木搭建的房子给予了项目开发者,它自身就包含了构建流程,假如搭建的房子并不理想或者想要稍稍修改一下,那么可以通过修改webpack的配置文件来解决,简单来说,webpack是一个基于对开发目的精准预测下的可配置系统。

    webpack引入资源的方式很简单,如图片、css文件,和common js规范引入其他js文件的方式相同,使用require指令,common js规范规定每个文件就是一个单独的模块,每个模块是一个单独的作用域。

moudle.exports=App;

require(‘App’);

并且webpack会智能地根据我们引入资源文件的大小来决定最终应该以什么样的方式来发布使用这个文件。

代码分割(code splitting):只去加载当前只需加载的文件,即按需加载

Loader:module可以通过loader去处理各种各样的文件,如JS文件(Common JS、AMD、ES6模块化方式),CSS文件、图片文件、JSON文件、自定义文件等等。

插件系统:模块热更新,对开发调试有效率

Webpack安装:

cd workspaces

Mkdir webpack-test

Cd webpack-test

Npm init

Npm install webpack --save-dev

Webpack打包css文件时会报错,因为它自身不带要css loader,所以要先下载

Npm install css-loader style-loader--save-dev

然后再指定style.css文件的加载器:require(‘style-loader!css-loader!./style.css’)

css-loader能够使得webpack处理css文件,style-loader能够将css-loader处理完的文件新建一个<style>标签,插入在html文件中的<head>标签中。

Webpack基本配置:

在项目中新建webpack.config.js文件,用于webpack基本配置,在命令行输入webpack命令会自动读取默认的配置文件webpack.config.js,来进行打包前的设置,当然也可以使用config参数来更改默认的配置文件

webpack--config webpack.dev.config.js指定打包时默认的配置文件。

moudle.exports={

entry: ’.src/script/main.js’,

output:{

path: ’./dist/js’,

filename: ’bundle.js’

}

}

在webpack加参数时与parse.json结合使用,然后npm run webpack

entry:打包入口

entry: ’.src/script/main.js’,

entry: [’.src/script/main.js’, ‘.src/script/a.js’]两个不相依赖的文件打包在一起

entry:{

main: ’.src/script/main.js’,

a: ‘.src/script/a.js’

}

output: {

path:’./dist’,

filename:’js/[name]-[hash].js’//多个出口文件[chunkhash]

}

Webpack插件

安装:npm html-webpack-plugin --save-dev

使用:

在webpack.config.js文件中的对象新添一个插件属性:

plugins:[

newhtmlWebpackPlugin({

filename: ‘index-[hash].html’,

template: ‘index.html’,

inject: ‘head’,

title: ‘webpack is good’//<%= htmlWebpackPlugin.options.title%>

})

]

Loader

var htmlWebpackPlugin =

require('html-webpack-plugin');//引入插件,先得安装

var path = require('path');

module.exports = {

entry:'./src/script/main.js',

entry:['./src/script/main.js','./src/script/a.js'],//将两个不相干的文件打包在一起

output:{

path:'./dist',

filename:'js/bundle.js'

}

entry:{

main:'./src/script/main.js',

a:'./src/script/a.js'

},//

output:{

path:'./dist/js',

filename:'[name].js'

filename:'[hash].js'//每次打包的hash值,每次打包名字都不一样

filename:'[chunkhash].js'//每次打包后的文件版本号hash值,若文件无改动,则名字不改变

publicPath:'http://cdn.com/'//线上地址

},

module:{

loaders:[

{

test:/\.js$/,

loader:'babel',

include:path.resolve(_dirname,'src'),

exclude:path.resolve(_dirname,'node_modules'),

query:{

presets:['latest']//设置babel转译时使用最新版本,即es5,es6,

}

}

]

},

plugins:{

newhtmlWebpackPlugin({

template:'index.html',

filename:'index-[hash].html',

inject:'head',

title:'webpack is good',

minify:{

removeComments:true,

collapseWhitespace:true

},

chunks:['main','a']

}),

newhtmlWebpackPlugin({

template:'index.html',

filename:'a.html',

inject:'body',

title:'webpack is very good',

minify:{

removeComments:true,

collapseWhitespace:true

},

chunks:['c']

})

}

//模板template为根目录下的index.html

//在根目录下的index.html中修改<%=htmlWebpackPlugin.options.title %>

//minify用于压缩index.html文件,去除注释和空格

//多个htmlWebpackPlugin对象,意味着生成多个html文件,即多页面应用

}

相关文章

  • Webpack深入与实战

    如果把项目开发的过程比作用积木搭房子的过程,Browserify:封装了各种各样的的小积木块,那怎么把这些积...

  • webpack深入与实战

    命令行 打包js 打包css首先安装依赖: css-loader 使webpack能处理.css文件。style-...

  • webpack深入到实战

    https://www.imooc.com/learn/802/

  • 深入koa源码(一):架构设计

    本文来自《心谭博客·深入koa源码:架构设计》前端面试、设计模式手册、Webpack4教程、NodeJs实战等更多...

  • webpack实战--webpack-dev-server介绍|

    实战最简单的webpack命令: npx webpack --entry=./index.js --output-...

  • Java书籍推荐

    《深入理解Java虚拟机:JVM高级特性与最佳实践》 ***** 《HotSpot实战》 《Java并发编程实战》...

  • webpack 原理与实战

    Ba la la la ~ 读者朋友们,你们好啊,又到了冷锋时间,话不多说,发车! webpack是什么...

  • rem、vw可伸缩布局框架(fpx)

    前言 前面我们分析了webpack,最后还实战了一个vue的项目: webpack实战之(手把手教你从0开始搭建一...

  • 电子书收藏

    深入浅出 Webpack

  • 书单

    技术书单 Java编程思想 深入理解Java虚拟机:JVM高级特性与最佳实践 HotSpot实战 Spring实战...

网友评论

      本文标题:Webpack深入与实战

      本文链接:https://www.haomeiwen.com/subject/ppsrlxtx.html