码迷,mamicode.com
首页 > Web开发 > 详细

webpack理论完整版

时间:2018-03-05 16:02:57      阅读:580      评论:0      收藏:0      [点我收藏+]

标签:gulp   不用   obj   log   理论   extra   convert   就会   min   

有关于webpack官方文档的粗略学习,暂时告一段落,关于webpack是如何将项目整体构建包括代替gulp和grunt的打包功能,有待在实际项目中更深一步的实践。毕竟已经有一段时间不用了,知识在于巩固,不巩固是真的会生疏的,而且webpack4新鲜出炉,号称实现零配置。而且最近后天同学在进行关于spring boot 和spring cloud的学习,据了解也是零配置。感觉技术虽然越来越多,但是“懒人”还是大有人在,俗话说懒促进了世界的发展。那么,下次研究webpack4之后再来分解。

一下是关于上次webpack笔记的更新:

webpack

 

应用程序静态模块打包器

 

webpack-dev-server 为你提供了一个简单的web服务器,并且能够实时重新加载,

npm install —save-dev webpack-dev-server 

 

当使用 webpack dev server 和 Node.js API 时,不要将 dev server 选项放在 webpack 配置对象(webpack config object)中。而是,在创建选项时,将其作为第二个参数传递

 

 

const webpackDevServer = require(‘webpack-dev-server‘); // 服务依赖

const webpack = require(‘webpack’); // webpack依赖

const config = require(‘./webpack.config.js‘); // webpack的config依赖

const options = { dev-server的配置 

  contentBase: ‘./dist‘,

  hot: true,

  host: ‘localhost‘

};

 

webpackDevServer.addDevServerEntrypoints(config, options);

const compiler = webpack(config);

const server = new webpackDevServer(compiler, options);

 

server.listen(5000, ‘localhost‘, () => {

  console.log(‘dev server listening on port 5000‘);

});

 

 

webpack的开发和生产环境是不同的,开发环境要去有强大的实时重新加载模块和热替换模块,生产环境要求更快的加载时间,更优化的资源应用。

但是还是要遵循DRY原则:

  webpack-demo

  |- package.json

- |- webpack.config.js

+ |- webpack.common.js

+ |- webpack.dev.js

+ |- webpack.prod.js

  |- /dist

  |- /src

    |- index.js

    |- math.js

  |- /node_modules

 

 

依据此项目目录,我们提取出开发环境和生产环境公共的代码,

webpack.common.js:

+ const path = require(‘path‘);

+ const CleanWebpackPlugin = require(‘clean-webpack-plugin‘);

+ const HtmlWebpackPlugin = require(‘html-webpack-plugin‘);

+

+ module.exports = {

+   entry: {

+     app: ‘./src/index.js‘

+   },

+   plugins: [

+     new CleanWebpackPlugin([‘dist‘]),

+     new HtmlWebpackPlugin({

+       title: ‘Production‘

+     })

+   ],

+   output: {

+     filename: ‘[name].bundle.js‘,

+     path: path.resolve(__dirname, ‘dist‘)

+   }

+ };

 

webpack.dev.js:

+ const merge = require(‘webpack-merge‘);

+ const common = require(‘./webpack.common.js‘);

+

+ module.exports = merge(common, {

+   devtool: ‘inline-source-map‘,

+   devServer: {

+     contentBase: ‘./dist‘

+   }

+ });

 

 

webpack.prod.js:

+ const merge = require(‘webpack-merge‘);

+ const UglifyJSPlugin = require(‘uglifyjs-webpack-plugin‘);

+ const common = require(‘./webpack.common.js‘);

+

+ module.exports = merge(common, {

+   plugins: [

+     new UglifyJSPlugin()

+   ]

+ });

 

防止重复的CommonsChunkPlugin

CommonsChunkPlugin的另一个少有人知道的功能是,能够在修改的构建结果中,将webpack的样板(bolierplate)和manifest提取出来。通过enter配置中未用到的名称,此插件会自动将我们需要的内容提取到单独的包中

 

 

ExtractTextPlugin :将css从主应用程序中分离

bundle-loader  用于分离代码和延迟加载生成的bundle

promise-loader :类似于bundle-loader :但使用的是promises

 

 

 

动态导入

1 import  (会调用到内部的promises

 

 

 

polyfill 垫片 支持新的javascript代码,不支持新的api

 

 

懒加载/按需加载

 

 

缓存:

在部署新版本时,不更改资源文件的名字的话,浏览器就认为此文件没有被更新,就会使用它的缓存版本。通过output.filename进行文件名的更改,可以确保浏览器获取到修改后的文件

hash替换可以用于在文件名中包含一个构建相关的(build-specific)的hash,但是更好的方式是使用chunkhash替换,在文件名中包含一个(chunk-specific)的哈希

 

 

创建library

除了打包应用程序代码,webpack还用于打包js  library

 

typeSctript

module.export = {

entry : ‘./src/index.ts’,

module : {

rules : [

test : /\.tsx?$/,

use  : ‘ts-loader’,

exclude : /node-modules/

]

},

resolve : {

extensions : [‘.tsx’,’.ts’,’.js’]

},

output : {

filename ‘bundle.js’,

path :path.resolve(__dirname ,’dist’)

}

}

 

 

渐进式网络应用程序(Progressive Web Application

  可以做很多事情,最重要的事是可以在离线时继续运行。这是使用名为Service Workers的网络技术来实现的

 

  ——service workers(服务工作线程,走的不同于页面的js线程)

是浏览器在后台独立与网页运行的脚本。这些脚本应用与不需要网页的用户交互功能。现在他包括推送通知和后台同步的功能,将来,服务工作线程会支持定期同步和地理围栏的功能。本教程讨论的核心功能是拦截和处理网络请求,包括通过程序来管理缓存中的响应。

 

首次实施服务工作线程时,可以通过chrome://serviceworker-internals 来查看服务工作线程详情。

 

最终实现的是,停止服务器然后刷新,仍然可以查看应用程序正常运行

 

1添加workbox   

添加workbox-webpack-plugin插件:npm install workbox-webpack-plugin —save-dev

webpakc.config.js里面添加

 const WorkboxPlugin = require(‘workbox-webpack-plugin‘);

以及在插件plugin里面添加  new WorkboxPlugin

clientsClaim  :true,

skipWaiting  :true

 

 

 

webpack的迁移*

 

 

管理依赖   es6modules   commonjs   amd

 

公共路径:

publicpath

webpack理论完整版

标签:gulp   不用   obj   log   理论   extra   convert   就会   min   

原文地址:https://www.cnblogs.com/wyliunan/p/8509366.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!