威尼斯人线上娱乐

webpack搭建vue最全分析,请手写三个webpack4

16 3月 , 2019  

面试官:请手写3个webpack4.0配置

2018/07/23 · 基本功技术 ·
webpack

原稿出处: WsmDyj   

肯定过眼神,你要么没有准备秋招的人?时间匆忙。自京东一月8号开启管培生的选聘,就意味着秋招的开始。不过你还在等着金秋的来到?二零一九年时局应该尤其严俊,随着各大技术(vue,webpack,react,微信小程序)生态特别成熟,那也象征大家要特别永不忘记的去打听她们,驾驭他们。比如您写vue项目,知道vue-cli。写的类型也无以伦比,可是你是或不是又会去领悟下vue-cli到底爆发了什么?或然那正是面试官要问您的题材:请手写二个webpack4.0的布署。

 

概述

原题目:vue-cli+webpack搭建vue最全分析

前言

机遇总是留给有准备的人,要想在那内忧外患的求职季里卓绝群伦,拿下你心早先时期待已久的offer。那么您更因该知道许多外人不晓得的东西,你的羽翼才能充实,才能翱翔于天际。鹰击长空,靠的不是天生,而是年轻时断崖之险。笨鸟先飞,靠的不是智慧,而是辛苦的着力。

1.入门

Webpack
是马上最叫座的前端能源模块化管理和包装工具。它能够将众多松散的模块遵照正视和规则打包成符合生产条件布署的前端能源。还是能将按需加载的模块进行代码分隔,等到实际需求的时候再异步加载。通过
loader 的更换,任何款式的能源都得以当作模块,比如 CommonJs 模块、 AMD模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等。
webpack在支付中得以行使 JavaScript
处理你的重视关系和加载顺序,防止不测引入一些你不须要在生育中用上的 CSS
样式表和 JS 库,使项目膨胀,或重新载入某个js,css等库。

一、vue-cli介绍

vue-cli是三个依据nodeJs、用于快捷搭建vue项目的 脚手架。

二、vue-cli安装、更新

安装过nodeJs 、cnpm 后,全局安装vue-cli(未来别的类型可直接使用):

cnpm install -g vue-cli

更新:

cnpm update vue-cli

翻看安装成功否(有版本号便是打响,V大写)

vue -V

翻看npm注册表里vue-cli版本号:

cnpm view vue-cli

三、vue-cli 使用

安装过webpack 、vue-cli后,能够开端搭建vue项目:

vue init webpack <Project Name>

eg:右击Git Base Here(假如您没有用git
,你也得以按住shift键右击选取“在此地打开命令窗口”,或许 cmd :cd
\project/lfxProject),如图:

威尼斯人线上娱乐 1or

ps:ESLint(三个java代码检查和测试工具)、unit
tests(单元测试)、Nightwatch(三个e2e用户界面测试工具)。

四 、项目到位

项目结构如下:

威尼斯人线上娱乐 2

各文件功能解析,如下:

1、build文件夹:

build文件夹的结构:

威尼斯人线上娱乐 3

(1)build.js

‘use strict’

require(‘./check-versions’)() //调用版本检查

process.env.NODE_ENV = ‘production’ //将环境陈设为生产条件

const ora = require(‘ora’) //npm包 loading插件

const rm = require(‘rimraf’) //npm包 用于删除文件

const path = require(‘path’)//npm包 文件路径工具

const chalk = require(‘chalk’)//npm包 在巅峰输出带颜色的文字

const webpack = require(‘webpack’)//引入webpack.js

const config = require(‘../config’)//引入配置文件

const webpackConfig =
require(‘./webpack.prod.conf’)//引入生产环境安顿文件

// 在巅峰彰显loading效果,并出口提醒

const spinner = ora(‘building for production…’)

spinner.start()

//先递归删除dist文件再生成新文件,防止冗余

rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory),
err => {

if (err) throw err

webpack(webpackConfig, (err, stats) => {

spinner.stop()

if (err) throw err

process.stdout.write(stats.toString({

colors: true,

modules: false,

children: false,

chunks: false,

chunkModules: false

}) + ‘\n\n’)

if (stats.hasErrors()) {

console.log(chalk.red(‘ Build failed with errors.\n’))

process.exit(1)

}

console.log(chalk.cyan(‘ Build complete.\n’))

console.log(chalk.yellow(

‘ Tip: built files are meant to be served over an HTTP server.\n’ +

‘ Opening index.html over file:// won\’t work.\n’

))

})

})

ps:require/export是一种nodeJs(commonJs规范)的依靠注入的章程,import/export是ES6语法,用于引入模块,在nodeJs中利用的ES6语法最后会选取babel工具(babel-loader)转化为ES5

(2)check-version.js:检查和测试node和npm的版本,完毕版本注重

‘use strict’

const chalk = require(‘chalk’)

const semver = require(‘semver’)//检查版本

const packageConfig = require(‘../package.json’)

const shell = require(‘shelljs’)//shelljs 模块重新包装了
child_process,调用系统命令特别方便

function exec (cmd) {//再次回到通过child_process模块的新建子进度,执行 Unix
系统命令后转成没有空格的字符串

return require(‘child_process’).execSync(cmd).toString().trim()

}

const versionRequirements = [

{

name: ‘node’,

currentVersion: semver.clean(process.version),//使用semver格式化版本

versionRequirement: packageConfig.engines.node
//获取package.json中设置的node版本

}

]

if (shell.which(‘npm’)) {

versionRequirements.push({

name: ‘npm’,

currentVersion: exec(‘npm –version’),// 自动调用npm
–version命令,并且把参数重返给exec函数,从而得到纯净的本子号

versionRequirement: packageConfig.engines.npm

})

}

module.exports = function () {

const warnings = []

for (let i = 0; i < versionRequirements.length; i++) {

const mod = versionRequirements[i]

//若版本号不合乎package.json文件中钦赐的本子号,就报错

if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {

warnings.push(mod.name + ‘: ‘ +

chalk.red(mod.currentVersion) + ‘ should be ‘ +

chalk.green(mod.versionRequirement)

)

}

}

if (warnings.length) {

console.log(”)

console.log(chalk.yellow(‘To use this template, you must update
following to modules:’))

console.log()

for (let i = 0; i < warnings.length; i++) {

const warning = warnings[i]

console.log(‘ ‘ + warning)

}

console.log()

process.exit(1)

}

}

(3)utils.js:utils是工具的意趣,是1个用来拍卖css的文件,这么些文件包括了三个工具函数:

  • 浮动静态能源的门路
  • 生成 ExtractTextPlugin对象或loader字符串
  • 生成 style-loader的配置

var path = require(‘path’)// node自带的文书路径工具

var config = require(‘../config’)// 配置文件

var ExtractTextPlugin = require(‘extract-text-webpack-plugin’)//
提取css的插件

/** @method assertsPath
生成静态财富的门路(判断开发条件和生产环境,为config文件中index.js文件中定义assetsSubDirectory)

* @param {String} _path 相对于静态财富文件夹的文书路径

* @return {String} 静态能源全部路径

*/

exports.assetsPath = function (_path) {

var assetsSubDirectory = process.env.NODE_ENV === ‘production’

? config.build.assetsSubDirectory

: config.dev.assetsSubDirectory

//nodeJs
path提供用于拍卖文件路径的工具;path.posix提供对路线方法的POSIX(可移植性操作系统接口)特定完结的拜会(可跨平台);
path.posix.join与path.join一样,可是一而再以 posix 包容的艺术相互

return path.posix.join(assetsSubDirectory, _path)

}

/**@method cssLoaders
生成处理css的loaders配置,使用css-loader和postcssLoader,通过options.usePostCSS属性来判定是还是不是采取postcssLoader中减掉等格局

* @param {Object} option = {sourceMap: true,// 是或不是打开
sourceMapextract: true // 是不是提取css}生成配置

* @return {Object} 处理css的loaders配置对象

*/

exports.cssLoaders = function (options) {

options = options || {}

var cssLoader = {

loader: ‘css-loader’,

options: {

minimize: process.env.NODE_ENV === ‘production’,

sourceMap: options.sourceMap

}

}

/**@method generateLoaders 生成 ExtractTextPlugin对象或loader字符串

* @param {Array} loaders loader名称数组

* @return {String|Object} ExtractTextPlugin对象或loader字符串

*威尼斯人线上娱乐 ,/

function generateLoaders (loader, loaderOptions) {

var loaders = [cssLoader]

if (loader) {

loaders.push({

loader: loader + ‘-loader’,

options: Object.assign({}, loaderOptions, {

sourceMap: options.sourceMap

})

})

}

//
ExtractTextPlugin提取css(当下边包车型客车loaders未能正确引入时,使用vue-style-loader)

if (options.extract) {// 生产条件中,暗许为true

return ExtractTextPlugin.extract({

use: loaders,

fallback: ‘vue-style-loader’

})

} else {//再次回到vue-style-loader连接loaders的末梢值

return [‘vue-style-loader’].concat(loaders)

}

}

return {

css: generateLoaders(),//需要css-loader 和 vue-style-loader

postcss: generateLoaders(),//需要css-loader、postcssLoader 和
vue-style-loader

less: generateLoaders(‘less’),//需要less-loader 和 vue-style-loader

sass: generateLoaders(‘sass’, { indentedSyntax: true
}),//需要sass-loader 和 vue-style-loader

scss: generateLoaders(‘sass’),//需要sass-loader 和 vue-style-loader

stylus: generateLoaders(‘stylus’),//需要stylus-loader 和
vue-style-loader

styl: generateLoaders(‘stylus’)//需要stylus-loader 和 vue-style-loader

}

}

/**@method styleLoaders 生成 style-loader的配置

* @param {Object} options 生成配置

* @return {Array} style-loader的配置

*/

exports.styleLoaders = function (options) {

var output = []

var loaders = exports.cssLoaders(options)

//将种种css,less,sass等综合在一道得出结果输出output

for (var extension in loaders) {

var loader = loaders[extension]

output.push({

test: new RegExp(‘\\.’ + extension + ‘$’),

use: loader

})

}

return output

}

(4)vue-loader.conf.js:处理.vue文件,解析这么些文件中的每一个语言块(template、、style),转换来js可用的js模块。

‘use strict’

const utils = require(‘./utils’)

const config = require(‘../config’)

const isProduction = process.env.NODE_ENV === ‘production’

//生产环境,提取css样式到独门文件

const sourceMapEnabled = isProduction

? config.build.productionSourceMap

: config.dev.cssSourceMap

module.exports = {

loaders: utils.cssLoaders({

sourceMap: sourceMapEnabled,

extract: isProduction

}),

cssSourceMap: sourceMapEnabled,

cacheBusting: config.dev.cacheBusting,

//编译时将“引入路径”转换为require调用,使其可由webpack处理

transformToRequire: {

video: [‘src’, ‘poster’],

source: ‘src’,

img: ‘src’,

image: ‘xlink:href’

}

}

(5)webpack.base.conf.js:开发、测试、生产条件的共用基础配置文件,配置输出环境,配置模块resolve和插件等

‘use strict’

const path = require(‘path’)// node自带的公文路径工具

const utils = require(‘./utils’)// 工具函数集合

const config = require(‘../config’)// 配置文件

const vueLoaderConfig = require(‘./vue-loader.conf’)// 工具函数集合

/**

* 获取”相对路径”

* @method resolve

* @param {String} dir 相对于本文件的路线

* @return {String} 相对路径

*/

function resolve(dir) {

return path.join(__dirname, ‘..’, dir)

}

module.exports = {

context: path.resolve(__dirname, ‘../’),

//入口js文件(默许为单页面所以唯有app一个输入)

entry: {

app: ‘./src/main.js’

},

//配置出口

output: {

path: config.build.assetsRoot,//打包编写翻译的根路径(dist)

filename: ‘[name].js’,

publicPath: process.env.NODE_ENV === ‘production’

? config.build.assetsPublicPath

: config.dev.assetsPublicPath//发表路径

},

resolve: {

extensions: [‘.js’, ‘.vue’, ‘.json’],// 自动补全的扩展名

//别名配置

alias: {

‘vue$’: ‘vue/dist/vue.esm.js’,

‘@’: resolve(‘src’),// eg:”src/components” => “@/components”

}

},

module: {

rules: [

//使用vue-loader将vue文件编写翻译转换为js

{

test: /\.vue$/,

loader: ‘vue-loader’,

options: vueLoaderConfig

},

//通过babel-loader将ES6编写翻译压缩成ES5

{

test: /\.js$/,

loader: ‘babel-loader’,

include: [resolve(‘src’), resolve(‘test’),
resolve(‘node_modules/webpack-dev-server/client’)]

},

//使用url-loader处理(图片、音像、字体),超过10000编译成

{

test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,

loader: ‘url-loader’,

options: {

limit: 10000,

name: utils.assetsPath(‘img/[name].[hash:7].[ext]’)

}

},

{

test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,

loader: ‘url-loader’,

options: {

limit: 10000,

name: utils.assetsPath(‘media/[name].[hash:7].[ext]’)

}

},

{

test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,

loader: ‘url-loader’,

options: {

limit: 10000,

name: utils.assetsPath(‘fonts/[name].[hash:7].[ext]’)

}

}

]

},

//nodeJs全局变量/模块,幸免webpack注入一些nodeJs的事物到vue中

node: {

setImmediate: false,

dgram: ’empty’,

fs: ’empty’,

net: ’empty’,

tls: ’empty’,

child_process: ’empty’

}

}

(6)webpack.dev.conf.js:webpack配置开发条件中的入口

‘use strict’

const utils = require(‘./utils’)

const webpack = require(‘webpack’)

const config = require(‘../config’)

const merge = require(‘webpack-merge’)//webpack-merge完毕统一

const path = require(‘path’)

const baseWebpackConfig = require(‘./webpack.base.conf’)

const CopyWebpackPlugin = require(‘copy-webpack-plugin’)

const HtmlWebpackPlugin = require(‘html-webpack-plugin’)

const FriendlyErrorsPlugin =
require(‘friendly-errors-webpack-plugin’)//webpack的提醒错误和日志音信的插件

const portfinder = require(‘portfinder’)//
查看空闲端口位置,私下认可景况下寻找八千那么些端口

const HOST = process.env.HOST

const PORT = process.env.PORT && Number(process.env.PORT)

const devWebpackConfig = merge(baseWebpackConfig, {

module: {

rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap,
usePostCSS: true })

},

devtool: config.dev.devtool,//调节和测试方式

devServer: {

clientLogLevel: ‘warning’,

historyApiFallback: {//使用 HTML5 History API 时, 404 响应替代为
index.html

rewrites: [

{ from: /.*/, to: path.posix.join(config.dev.assetsPublicPath,
‘index.html’) },

],

},

hot: true,//热重载

contentBase: false, // 提供静态文件访问

compress: true,//压缩

host: HOST || config.dev.host,

port: PORT || config.dev.port,

open: config.dev.autoOpenBrowser,//npm run dev 时自动打开浏览器

overlay: config.dev.errorOverlay

? { warnings: false, errors: true }

: false,// 显示warning 和 error 信息

publicPath: config.dev.assetsPublicPath,

proxy: config.dev.proxyTable,//api代理

quiet: true, //控制台打字与印刷警告和错误(用FriendlyErrorsPlugin 为 true)

watchOptions: {// 检查和测试文件改动

poll: config.dev.poll,

webpack搭建vue最全分析,请手写三个webpack4。}

},

plugins: [

new webpack.DefinePlugin({

‘process.env’: require(‘../config/dev.env’)

}),

new
webpack.HotModuleReplacementPlugin(),//模块热替换插件,修改模块时不要求刷新页面

new webpack.NamedModulesPlugin(), // HMR shows correct file names in
console on update.

new
webpack.NoEmitsPlugin(),//webpack编写翻译错误的时候,中断打包进度,防止错误代码打包到文件中

// 将包裹编译好的代码插入index.html

new HtmlWebpackPlugin({

filename: ‘index.html’,

template: ‘index.html’,

inject: true

}),

// 提取static assets 中css 复制到dist/static文件

new CopyWebpackPlugin([

{

from: path.resolve(__dirname, ‘../static’),

to: config.dev.assetsSubDirectory,

ignore: [‘.*’]//忽略.*的文件

}

])

]

})

module.exports = new Promise((resolve, reject) => {

portfinder.basePort = process.env.PORT || config.dev.port

portfinder.getPort((err, port) => { //查找端口号

if (err) {

reject(err)

} else {

//端口被私吞时就再次安装evn和devServer的端口

process.env.PORT = port

devWebpackConfig.devServer.port = port

// npm run dev成功的交情提醒

devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({

compilationSuccessInfo: {

messages: [`Your application is running here:
],

},

s: config.dev.notifys

? utils.createNotifierCallback()

: undefined

}))

resolve(devWebpackConfig)

}

})

})

(7)webpack.dev.prod.js:webpack配置生产条件中的入口

‘use strict’

const path = require(‘path’)

const utils = require(‘./utils’)

const webpack = require(‘webpack’)

const config = require(‘../config’)

const merge = require(‘webpack-merge’)

const baseWebpackConfig = require(‘./webpack.base.conf’)

const CopyWebpackPlugin = require(‘copy-webpack-plugin’)

const HtmlWebpackPlugin = require(‘html-webpack-plugin’)

const ExtractTextPlugin = require(‘extract-text-webpack-plugin’)

const OptimizeCSSPlugin = require(‘optimize-css-assets-webpack-plugin’)

const UglifyJsPlugin = require(‘uglifyjs-webpack-plugin’)

const env = require(‘../config/prod.env’)

const webpackConfig = merge(baseWebpackConfig, {

module: {

rules: utils.styleLoaders({

sourceMap: config.build.productionSourceMap,

extract: true,

usePostCSS: true

})

},

devtool: config.build.productionSourceMap ? config.build.devtool :
false,//是不是开启调节和测试方式

output: {

path: config.build.assetsRoot,

filename: utils.assetsPath(‘js/[name].[chunkhash].js’),

chunkFilename: utils.assetsPath(‘js/[id].[chunkhash].js’)

},

plugins: [

new webpack.DefinePlugin({

‘process.env’: env

}),

new UglifyJsPlugin({//压缩js

uglifyOptions: {

compress: {

warnings: false

}

},

sourceMap: config.build.productionSourceMap,

parallel: true

}),

new ExtractTextPlugin({//提取静态文件,减弱请求

filename: utils.assetsPath(‘css/[name].[contenthash].css’),

allChunks: true,

}),

new OptimizeCSSPlugin({//提取优化压缩后(删除来自分歧组件的冗余代码)的css

cssProcessorOptions: config.build.productionSourceMap

? { safe: true, map: { inline: false } }

: { safe: true }

}),

new HtmlWebpackPlugin({ //html打包压缩到index.html

filename: config.build.index,

template: ‘index.html’,

inject: true,

minify: {

removeComments: true,//删除注释

collapse惠特espace: true,//删除空格

removeAttributeQuotes: true//删除属性的引号

},

chunksSortMode: ‘dependency’//模块排序,根据我们供给的相继排序

}),

new webpack.HashedModuleIdsPlugin(),

new webpack.optimize.ModuleConcatenationPlugin(),

new webpack.optimize.CommonsChunkPlugin({ //
node_modules中的任何所需模块都领到到vendor

name: ‘vendor’,

minChunks (module) {

return (

module.resource &&

/\.js$/.test(module.resource) &&

module.resource.indexOf(

path.join(__dirname, ‘../node_modules’)

) === 0

)

}

}),

new webpack.optimize.CommonsChunkPlugin({

name: ‘manifest’,

minChunks: Infinity

}),

new webpack.optimize.CommonsChunkPlugin({

name: ‘app’,

async: ‘vendor-async’,

children: true,

minChunks: 3

}),

new CopyWebpackPlugin([//复制static中的静态财富(暗中同意到dist里面)

{

from: path.resolve(__dirname, ‘../static’),

to: config.build.assetsSubDirectory,

ignore: [‘.*’]

}

])

]

})

if (config.build.productionGzip) {

const CompressionWebpackPlugin = require(‘compression-webpack-plugin’)

webpackConfig.plugins.push(

new CompressionWebpackPlugin({

asset: ‘[path].gz[query]’,

algorithm: ‘gzip’,

test: new RegExp(

‘\\.(‘ +

config.build.productionGzipExtensions.join(‘|’) +

‘)$’

),

threshold: 10240,

minRatio: 0.8

})

)

}

if (config.build.bundleAnalyzerReport) {

const BundleAnalyzerPlugin =
require(‘webpack-bundle-analyzer’).BundleAnalyzerPlugin

webpackConfig.plugins.push(new BundleAnalyzerPlugin())

}

module.exports = webpackConfig

2、config文件夹:

config文件夹的结构:

威尼斯人线上娱乐 4

(1)
dev.env.js和prod.env.js:分别安排:开发环境和生育环境。这一个能够依照企务重组后端供给安顿要求区分开发条件和测试环境的天性

‘use strict’

const merge = require(‘webpack-merge’)

const prodEnv = require(‘./prod.env’)

module.exports = merge(prodEnv, {

NODE_ENV: ‘”development”‘

})

ps:webpack-merge用于贯彻统一类似于ES6的Object.assign()

‘use strict’

module.exports = {

NODE_ENV: ‘”production”‘

}

(*在意属性值要用“‘’”双层引住),访问(获取值)时直接用:

process.env.属性名

ps:process(进度)是nodejs的3个全局变量,process.env
属性再次回到二个用户环境消息的靶子

(2)index.js配置分析:

‘use strict’;

const path = require(‘path’);

module.exports = {

// ===================开发条件铺排

dev: {

assetsSubDirectory:
‘static’,//静态财富文件夹(一般存放css、js、image等文件)

assetsPublicPath: ‘/’,//根目录

proxyTable: {},//配置API代理,可应用该属性消除跨域的题材

host: ‘localhost’, // 可以被 process.env.HOST 覆盖

port: 3030, // 可以被 process.env.PORT 覆盖

autoOpenBrowser: true,//编写翻译后自动打开浏览器页面
+
host”,私下认可”false”),设置路由重定向自动打开你的暗中同意页面

errorOverlay: true,//浏览器错误提示

notifys: true,//跨平台错误提醒

poll: false, //webpack提供的利用文件系统(file
system)获取文件改动的布告devServer.watchOptions(监察和控制文件改动)

devtool:
‘cheap-module-eval-source-map’,//webpack提供的用来调节的形式,有多个分化值代表分裂的调节和测试格局

cacheBusting: true,//
合营devtool的安排,当给文件名插入新的hash导致清除缓存时是不是生成source-map

cssSourceMap: true
//记录代码压缩前的地点音讯,当产生错误时直接固定到未压缩前的职责,方便调节和测试

},

// ========================生产条件布署

build: {

index: path.resolve(__dirname,
‘../dist/index.html’),//编写翻译后”首页面”生成的绝对路径和名字

assetsRoot: path.resolve(__dirname,
‘../dist’),//打包编写翻译的根路径(默许dist,存放打包压缩后的代码)

assetsSubDirectory:
‘static’,//静态能源文件夹(一般存放css、js、image等文件)

assetsPublicPath: ‘/’,//揭橥的根目录(dist文件夹所在途径)

productionSourceMap: true,//是或不是开启source-map

devtool:
‘#source-map’,//(详细参见:)

productionGzip: false,//是不是压缩

productionGzipExtensions: [‘js’,
‘css’],//unit的gzip命令用来压缩文件(gzip格局下须求减小的公文的恢弘名有js和css)

bundleAnalyzerReport: process.env.npm_config_report
//是还是不是打开包装后的分析报告

}

};

3、node_modules文件夹:存放npm
install时根据package.json配置生成的npm安装包的文件夹

肆 、src文件夹:大家须求在src文件夹中支付代码,打包时webpack会依据build中的规则(build规则依赖于config中的配置)将src打包压缩到dist文件夹在浏览器中运维

(1)assets文件:用于存放静态财富(css、image),assets打包时路径会经过webpack中的file-loader编写翻译(由此,assets须要采纳相对路径)成js

(2)components文件夹:用来存放在 .vue
组件(完成复用等功用,如:过滤器,列表项等)

(3)router文件夹:在router/index.js文件中布置页面路由

(4)App.vue:是整整项目标主组件,全体页面都以经过动用<router-view/>开放入口在App.vue下实行切换的(全部的路由都是App.vue的子组件)

(5)main.js:入口js文件(全局js,你可以在此间:起头化vue实例、require/import需求的插件、注入router路由、引入store状态管理)

⑤ 、static文件夹:webpack私下认可存放静态文件(css、image)的文本夹,与assets不一样的是:static在卷入时会直接复制3个同名文件夹到dist文件夹里(不会通过编写翻译,可选择绝对路径)

陆 、其余文件:

(1).babelrc:浏览器解析的极度配置,该文件重庆大学是对预设(presets)和插件(plugins)进行配备,由此不相同的转译器成效差异的安插项,大约可分为:语法转义器、补丁转义器、sx和flow插件

(2).editorconfig:用于配置代码格式(合营代码检查工具使用,如:ESLint,团队开发时可统一代码风格),那里配置的代码规范规则优先级高于编辑器私下认可的代码格式化规则

(3).gitignore:配置git提交时要求忽略的文本

(4)postcssrc.js:
autoprefixer(自动补全css样式的浏览器前缀);postcss-import(@import引入语法)、CSS
Modules(规定样式成效域)

(5)index.html:项目入口页面,编写翻译之后有所代码将插入到那来

(6)package.json:npm的配置文件(npm
install依照package.json下载对应版本的安装包)

(7)package.lock.json:npm install(安装)时锁定各包的本子号

(8)README.md:项目应用验证

webpack详解

webpack是一个包装工具,他的宏旨是全体静态财富即可打包。有人就会问为啥要webpack?webpack是当代前端技术的水源,常规的开发方式,比如jquery,html,css静态网页开发已经落伍了。未来是MVVM的时期,数据驱动界面。webpack将现代js开发中的种种新型有用的技巧,集合打包。webpack的讲述铺天盖地,作者就不浪费我们的时辰了。掌握下那种图就领悟webpack的生态圈了:
威尼斯人线上娱乐 5

 

使用webpack

5、运转品种

在webStorm中开辟项目,首先赶紧右击Project进行如下操作(不然会卡死,还有各类别的办法参见:

威尼斯人线上娱乐 6

(1)运行安装:cnpm install

威尼斯人线上娱乐 7

(2)然后npm run dev:跑起来~

威尼斯人线上娱乐 8

(3)生成打包文件 :npm run build

然后您会意识项目多了个dist文件夹(用于安插到生育环境用,是包裹压缩之后的src文件夹)

威尼斯人线上娱乐 9

© 小说权归作者全数归来微博,查看愈多

主编:

webpack4.0的配置

JavaScript

const path = require(‘path’); //引入node的path模块 const webpack =
require(‘webpack’); //引入的webpack,使用lodash const HtmlWebpackPlugin =
require(‘html-webpack-plugin’) //将html打包 const ExtractTextPlugin =
require(‘extract-text-webpack-plugin’) //打包的css拆分,将某个抽离出来
const CopyWebpackPlugin = require(‘copy-webpack-plugin’) //
console.log(path.resolve(__dirname,’dist’)); //物理地址拼接
module.exports = { entry: ‘./src/index.js’, //入口文件 在vue-cli main.js
output: { //webpack如何输出 path: path.resolve(__dirname, ‘dist’),
//定位,输出文件的对象路径 filename: ‘[name].js’ }, module: {
//模块的连带安插 rules: [ //依照文件的后缀提供2个loader,解析规则 {
test: /\.js$/, //es6 => es5 include: [ path.resolve(__dirname,
‘src’) ], // exclude:[], 不匹配选项(优先级高于test和include) use:
‘babel-loader’ }, { test: /\.less$/, use: ExtractTextPlugin.extract({
fallback: ‘style-loader’, use: [ ‘css-loader’, ‘less-loader’ ] }) }, {
//图片loader test: /\.(png|jpg|gif)$/, use: [ { loader: ‘file-loader’
//遵照文件地方加载文件 } ] } ] }, resolve: { //解析模块的可选项 //
modules: [ ]//模块的追寻目录 配置别的的css等文件 extensions: [“.js”,
“.json”, “.jsx”,”.less”, “.css”], //用到文件的恢弘名 alias: {
//模快别称列表 utils: path.resolve(__dirname,’src/utils’) } },
plugins: [ //插进的引用, 压缩,分离美化 new
ExtractTextPlugin(‘[name].css’), //[name] 暗许 也得以自定义name
证明使用 new HtmlWebpackPlugin({
//将模板的头顶和尾部添加css和js模板,dist
目录发布到服务器上,项目包。能够直接上线 file: ‘index.html’,
//塑造单页面运用 最终运行的不是以此 template: ‘src/index.html’
//vue-cli放在跟目录下 }), new CopyWebpackPlugin([
//src下别的的文件平昔复制到dist目录下 {
from:’src/assets/favicon.ico’,to: ‘favicon.ico’ } ]), new
webpack.ProvidePlugin({ //引用框架 jquery
lodash工具库是成百上千组件会复用的,省去了import ‘_’: ‘lodash’
//引用webpack }) ], devServer: { //服务于webpack-dev-server
内部封装了3个express port: ‘8080’, before(app) {
app.get(‘/api/test.json’, (req, res) => { res.json({ code: 200,
message: ‘Hello World’ }) }) } } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
const path = require(‘path’);  //引入node的path模块
const webpack = require(‘webpack’); //引入的webpack,使用lodash
const HtmlWebpackPlugin = require(‘html-webpack-plugin’)  //将html打包
const ExtractTextPlugin = require(‘extract-text-webpack-plugin’)     //打包的css拆分,将一部分抽离出来  
const CopyWebpackPlugin = require(‘copy-webpack-plugin’)
// console.log(path.resolve(__dirname,’dist’)); //物理地址拼接
module.exports = {
    entry: ‘./src/index.js’, //入口文件  在vue-cli main.js
    output: {       //webpack如何输出
        path: path.resolve(__dirname, ‘dist’), //定位,输出文件的目标路径
        filename: ‘[name].js’
    },
    module: {       //模块的相关配置
        rules: [     //根据文件的后缀提供一个loader,解析规则
            {
                test: /\.js$/,  //es6 => es5
                include: [
                    path.resolve(__dirname, ‘src’)
                ],
                // exclude:[], 不匹配选项(优先级高于test和include)
                use: ‘babel-loader’
            },
            {
                test: /\.less$/,
                use: ExtractTextPlugin.extract({
                    fallback: ‘style-loader’,
                    use: [
                    ‘css-loader’,
                    ‘less-loader’
                    ]
                })
            },
            {       //图片loader
                test: /\.(png|jpg|gif)$/,
                use: [
                    {
                        loader: ‘file-loader’ //根据文件地址加载文件
                    }
                ]
            }
        ]                  
    },
    resolve: { //解析模块的可选项  
        // modules: [ ]//模块的查找目录 配置其他的css等文件
        extensions: [".js", ".json", ".jsx",".less", ".css"],  //用到文件的扩展名
        alias: { //模快别名列表
            utils: path.resolve(__dirname,’src/utils’)
        }
    },
    plugins: [  //插进的引用, 压缩,分离美化
        new ExtractTextPlugin(‘[name].css’),  //[name] 默认  也可以自定义name  声明使用
        new HtmlWebpackPlugin({  //将模板的头部和尾部添加css和js模板,dist 目录发布到服务器上,项目包。可以直接上线
            file: ‘index.html’, //打造单页面运用 最后运行的不是这个
            template: ‘src/index.html’  //vue-cli放在跟目录下
        }),
        new CopyWebpackPlugin([  //src下其他的文件直接复制到dist目录下
            { from:’src/assets/favicon.ico’,to: ‘favicon.ico’ }
        ]),
        new webpack.ProvidePlugin({  //引用框架 jquery  lodash工具库是很多组件会复用的,省去了import
            ‘_’: ‘lodash’  //引用webpack
        })
    ],
    devServer: {  //服务于webpack-dev-server  内部封装了一个express
        port: ‘8080’,
        before(app) {
            app.get(‘/api/test.json’, (req, res) => {
                res.json({
                    code: 200,
                    message: ‘Hello World’
                })
            })
        }
    }
    
}

webpack网站: 

开首化项目

① 、前端环境搭建

咱俩使用npm或yarn来安装webpack

JavaScript

npm install webpack webpack-cli -g # 或者 yarn global add webpack
webpack-cli

1
2
3
npm install webpack webpack-cli -g
# 或者
yarn global add webpack webpack-cli

为什么webpack会分成多个文本呢?在webpack3中,webpack自己和它的cli在此以前都以在同多个包中,但在第五版中,他们曾经将两者分别来更好地管理它们。

新建一个webpack的公文夹,在其下新建二个try-webpack(幸免init时项目名和安装包同名)并早先化和布局webpack。

JavaScript

npm init -y //-y 默许全体的配备 yarn add webpack webpack-cli -D //-D
webpack安装在devDependencies环境中

1
2
npm init -y  //-y 默认所有的配置
yarn add webpack webpack-cli -D  //-D webpack安装在devDependencies环境中

npm install webpack -g

mkdir webpack-demo && cd webpack-demo
npm init -y
始建并进入webpack-demo,先导化2个新的品类,并成立package.json文件,’-y’表示可接受package.json的一对暗许值(四个npm使用技巧)
创立目录结构:

二、部署webpack

在上头搭建好的环境项目中,我们赶到package.json里安顿我们的scripts,让webpack

JavaScript

“scripts”: { “build”: “webpack –mode production”
//大家在那边配置,就能够使用npm run build 运转我们的webpack },
“devDependencies”: { “webpack”: “^4.16.0”, “webpack-cli”: “^3.0.8” }

1
2
3
4
5
6
7
  "scripts": {
    "build": "webpack –mode production" //我们在这里配置,就可以使用npm run build 启动我们的webpack
  },
  "devDependencies": {
    "webpack": "^4.16.0",
    "webpack-cli": "^3.0.8"
  }

布署好大家webpack的运营条件时,联想下vue-cli。平常应用vue-cli会自动帮大家计划并生成项目。大家在src下展开项目标支付,最终npm
run build
打包生成大家的dist的目录。不理解您是不是还记得,照旧让大家进去下一节让大家感受下这其间的正个流程吧。

不过官方不引进,那会将品种中的webpack锁定到内定版本,并且在使用区别webpack版本的种类中,恐怕会招致营造项目失效。

├── src
│ ├── main.js
│ ├── assets
│ │ ├── css
│ │ └── img
├── README.md
├── index.html
├── package.json
├── webpack.config.js
└── yarn.lock
安装

三 、npm run build 发生了如何

在大家的根项目下try-webpack新建1个src目录。在src目录下新建一个index.js文件。在里面我们能够写任意的代码,以案例为主:

const a = 1;

写完现在大家在终极运维大家的授命 npm run
build;你就会发现新增了三个dist目录,里面存放着webpack打包好的main.js文件。那和我们在vue-cli里操作是平等的。

 

npm i webpack -D
webpack.config.js

肆 、webpackp配置流程篇

大家在付出是形似会卷入src下的什么文件呢?咱们能够回看一下,其实vue-cli项目src下不就这几点呗:

  • 发布时索要的html,css,js
  • css预编写翻译器stylus,less,sass
  • es6的尖端语法
  • 图形财富.png,.gif,.ico,.jpg
  • 文件间的require
  • 别称@等修饰符

那么自个儿将会分这几点来上课webpack中webpack.config.js的布局,跟着脚步,一步一步的来形成大家的流程线。

npm init -y

计划音讯

✍️Html在webpack中的配置

在档次的根目录try-webpack下新建webpack.config.js文件,以commonJS模块化学工业机械制向外输出,并且新建1个index.html。

module.exports = {}

配备大家的入口entry,在vue-cli里也正是跟目录下的main.js,大家的出口output。大家能够把webpack掌握为一个厂子,进入也正是把各类各种的原质感放进大家的工厂了,然后工厂举办一雨后春笋的包裹操作把打包好的东西,向外输出,然后就能够去贩卖了(上线)。

JavaScript

const path = require(‘path’); //引入大家的node模块里的path //测试下
console.log(path.resolve(__dirname,’dist’)); //物理地址拼接
module.exports = { entry: ‘./src/index.js’, //入口文件 在vue-cli main.js
output: { //webpack如何向外输出 path: path.resolve(__dirname,
‘dist’),//定位,输出文件的靶子路径 filename: ‘[name].js’
//文件名[name].js暗中同意,也可自动布署 },

1
2
3
4
5
6
7
8
const path = require(‘path’); //引入我们的node模块里的path
//测试下 console.log(path.resolve(__dirname,’dist’)); //物理地址拼接
module.exports = {
    entry: ‘./src/index.js’, //入口文件  在vue-cli main.js
    output: {       //webpack如何向外输出
        path: path.resolve(__dirname, ‘dist’),//定位,输出文件的目标路径
        filename: ‘[name].js’ //文件名[name].js默认,也可自行配置
    },

HTML打包我们须要设置引入html-webpack-plugin

JavaScript

yarn add html-webpack-plugin -D //在开发环境中安装 const
HtmlWebpackPlugin = require(‘html-webpack-plugin’) //引入打包大家的HTML

1
2
yarn add html-webpack-plugin -D //在开发环境中安装
const HtmlWebpackPlugin = require(‘html-webpack-plugin’)  //引入打包我们的HTML

在module.exports里安插大家的plugins(插件):

JavaScript

plugins: [ //插进的引用, 压缩,分离美化 new HtmlWebpackPlugin({
//将模板的底部和底部添加css和js模板,dist
目录宣布到服务器上,项目包。能够一向上线 file: ‘index.html’,
//塑造单页面运用 最终运维的不是这一个 template: ‘src/index.html’
//vue-cli放在跟目录下 }), ],

1
2
3
4
5
6
plugins: [  //插进的引用, 压缩,分离美化
        new HtmlWebpackPlugin({  //将模板的头部和尾部添加css和js模板,dist 目录发布到服务器上,项目包。可以直接上线
            file: ‘index.html’, //打造单页面运用 最后运行的不是这个
            template: ‘src/index.html’  //vue-cli放在跟目录下
        }),
    ],

安插好后,在终点输入npm run
dev后webpack将大家的html打包好还要自动将大家的js引进来了。

<body> <p class=”main”>Hello World</p> <script
type=”text/javascript” src=”main.js”></script> </body>

1
2
3
4
<body>
    <p class="main">Hello World</p>
<script type="text/javascript" src="main.js"></script>
</body>

live-sever大家的dist目录,运营三个8080端口,大家就足以看来大家的Hello
World了。那就是我们上线版的页面。

npm install webpack –save-dev

  1. 输入(entry):告诉webpack打包从何地早先
  2. 输出(output):怎么样处理打包代码及包裹输出到怎样地点
  3. 加载器(loaders):通过loader识别出种种资源,将那么些文件转换为模块
  4. 插件(plugins):由于加载器仅依据单个文件举行转换,插件能够做一些更扑朔迷离的操作及自定义成效

css在webpack中的配置

在我们vue-cli里,大家得以应用css去写咱俩的体裁,也可以利用高级stylus,less,sass等预编写翻译器。那里就以less为例,看看webpack怎么将她打包成3个css。

CSS

.main { color: red; }

1
2
3
.main {
  color: red;
}

在src目录下新建我们的style.less文件,在安排从前大家供给npm大家的css-loader和sass-loader,
sass

yarn add css-loader less less-loader style-loader -D

执行完上述命令大家在packge.json里能够看来大家的安排文件

JavaScript

“devDependencies”: { “css-loader”: “^1.0.0”, “html-webpack-plugin”:
“^3.2.0”, “sass”: “^1.9.0”, “sass-loader”: “^7.0.3”, “webpack”:
“^4.16.0”, “webpack-cli”: “^3.0.8” }

1
2
3
4
5
6
7
8
"devDependencies": {
    "css-loader": "^1.0.0",
    "html-webpack-plugin": "^3.2.0",
    "sass": "^1.9.0",
    "sass-loader": "^7.0.3",
    "webpack": "^4.16.0",
    "webpack-cli": "^3.0.8"
  }

设置好后,大家初阶陈设webpack.config.js文件。那里表达一下,我们的css在dist目录下必要和大家的HTML分离,那是还需引入大家的extract-text-webpack-plugin,先然我们设置下

yarn add extract-text-webpack-plugin -D

此处有叁个坑,extract-text-webpack-plugin在4.0并不支持那样的安装,大家可自行chrome。于是我们选拔换一种情势,选用4.00-beta.0版本的

yarn add extract-text-webpack-plugin@last -D

赶来我们的module.exports里,实现moudel的布置

JavaScript

const ExtractTextPlugin = require(‘extract-text-webpack-plugin’)
//打包的css拆分,将一部分抽离出来 module: { //模块的连锁安插 rules: [
//根据文件的后缀提供三个loader,解析规则 { test: /\.less$/,
//正则非常大家以.less结尾的文本 use: ExtractTextPlugin.extract({
fallback: ‘style-loader’, use: [ ‘css-loader’, ‘less-loader’ ] }) },
]}, plugins:[ new ExtractTextPlugin(‘[name].css’), //[name] 暗中同意也可以自定义name 注解使用 ]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
const ExtractTextPlugin = require(‘extract-text-webpack-plugin’)     //打包的css拆分,将一部分抽离出来  
module: {       //模块的相关配置
      rules: [     //根据文件的后缀提供一个loader,解析规则
          {
              test: /\.less$/, //正则匹配我们以.less结尾的文件
              use: ExtractTextPlugin.extract({
                  fallback: ‘style-loader’,
                  use: [
                  ‘css-loader’,
                  ‘less-loader’
                  ]
              })
          },
      ]},
   plugins:[
      new ExtractTextPlugin(‘[name].css’),  //[name] 默认  也可以自定义name  声明使用
   ]

我们在实践大家的npm run
build之后并没有大家的css,为啥吗?原来在webpack铺排里css in
js。意思是在卷入是我们的css是包裹在大家的js里的,全部大家引入了extract-text-webpack-plugin插件将css从里边剥离出来。可是又2个标题,require的机制?

在我们打包进度中,文件的引用require
遵照顺序来打包,那便是文件信赖的体制。

打包好后大家在live-server,发现大家的体裁也上去了,并且css部分分离出来了。

webpack -v //查看版本

粗略安插

js在webpack中的配置

近日随着es6的普及,更加多的代码应用es6了,不过洋洋浏览器并不帮助es6,比如async/awiat,const。因而供给我们引用babe来把大家es6的代码编写翻译为es5。在跟目录下新建.babelrc,简单布置下

{“presets”: [“env”]}

安装我们的babel并在webpack.config.js里module/rules下进展计划

JavaScript

yarn add babel-loader babel-core abel-preset-env -D
//babel基本的八个公文 { test: /\.js$/, //es6 => es5 include: [
path.resolve(__dirname, ‘src’) ], // exclude:[],
不匹配选项(优先级高于test和include) use: ‘babel-loader’ },

1
2
3
4
5
6
7
8
9
yarn add babel-loader babel-core  abel-preset-env -D  //babel基本的三个文件
{
    test: /\.js$/,  //es6 => es5
    include: [
        path.resolve(__dirname, ‘src’)
    ],
    // exclude:[], 不匹配选项(优先级高于test和include)
    use: ‘babel-loader’
},

 

module.exports = {
    entry: './src/main.js',
    output: {
        filename: './dist/bundle.js'
    }
}

图表财富在webpack中的配置

在src目录下新建2个assets文件,里面放置几张图片。安装file-loader依照文件地方加载文件

yarn add file-loader -D
在webpack.config.js里module/rules

JavaScript

{ test: /\.(png|jpg|gif)$/, //匹配全体格式的图片财富 use: [ { loader:
‘file-loader’ } ] }

1
2
3
4
5
6
7
8
{  
    test: /\.(png|jpg|gif)$/, //匹配所有格式的图片资源
    use: [
        {
            loader: ‘file-loader’
        }
    ]
}

在顶峰中的语法:

运行

小名(@)在webpack中的配置

在src/index.js里大家引入

JavaScript

const format = require(‘utils/format’) // utils ? 没有相对路径 回顾@
=> 昵称 在src新建相应的文本。在format.js里经受三个参数并把它转成大写
module.exports = function format(chars) { return chars.toUpperCase() }

1
2
3
4
5
const format = require(‘utils/format’)  // utils ?  没有相对路径  回想@  => 别名
在src新建相应的文件。在format.js里接受一个参数并把它转成大写
module.exports = function format(chars) {
    return chars.toUpperCase()
}

在webpack中怎么着布置我们的外号呢?在vue-cli中我们常常@1个文书夹,其意思正是在src目录下,未来大家去一探终归。在module下,注意跟rules同级

JavaScript

resolve: { //解析模块的可选项 // modules: [ ]//模块的物色目录
配置别的的css等公事 extensions: [“.js”, “.json”, “.jsx”,”.less”,
“.css”], //用到文件的扩充名 alias: { //模快小名列表 utils:
path.resolve(__dirname,’src/utils’) } },

1
2
3
4
5
6
7
resolve: { //解析模块的可选项  
        // modules: [ ]//模块的查找目录 配置其他的css等文件
        extensions: [".js", ".json", ".jsx",".less", ".css"],  //用到文件的扩展名
        alias: { //模快别名列表
            utils: path.resolve(__dirname,’src/utils’)
        }
    },

webpack {entry file} {destination for bundled file}

webpack
dist目录下生成bundle.js文件
webpack别的参数

其余部分静态财富在webpack中的配置

  • src下任何的文件直接复制到dist目录下,并不是每一个文件都亟需打包处理的,很多财富也许直接就能够复制过去。使用大家的
    CopyWebpackPlugin插件
  • 引用框架 jquery
    lodash工具库是众多零件会复用的,省去了import。使用webpack.ProvidePlugin插件

e.g. webpack src/entry.js dist/bundle.js

  • webpack -p –
    进行优化压缩处理,约等于设置process.env.NODE_ENV=”production”
  • webpack –watch – 持续监听创设
  • webpack -d – debug模式,包含source maps
  • webpack –display-error-details – 展现详细的打包出错音信
  • webpack -h 查看越多的新闻,常见的还有–colors,–progress
  • webpack –config XXX.js
    //使用另一份配置文件(比如webpack.config2.js)来打包
    加载越来越多财富 –使用loader

五 、npm run dev 发生了何等

在vue-cli中大家运转监听npm run
dev能够天天监督大家src下文件的转移,那他终究发生了什么样啊。在webpack里实际创制了贰个node进度,通过webpack-dev-server其里头封装了一个node的express模块,其配备项如下

JavaScript

“scripts”: { //在package.json里声称下利用脚本 npm run dev “build”:
“webpack –mode production”, “start”: “webpack-dev-server –mode
development” }, devServer: { //在webpack.config.js里布署port port:
‘8080’, before(app) { app.get(‘/api/test.json’, (req, res) => {
res.json({ code: 200, message: ‘Hello World’ }) }) } }
//服务于webpack-dev-server 内部封装了1个express

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
"scripts": { //在package.json里声明下使用脚本 npm run dev
    "build": "webpack –mode production",
    "start": "webpack-dev-server –mode development"
  },
devServer: {  //在webpack.config.js里配置port
        port: ‘8080’,
        before(app) {
            app.get(‘/api/test.json’, (req, res) => {
                res.json({
                    code: 200,
                    message: ‘Hello World’
                })
            })
        }
    }  //服务于webpack-dev-server  内部封装了一个express


威尼斯人线上娱乐 10

 

栗子:

寄语

webpack里面接连不断,那只是刚入门。要斟酌个中间确实的东西,并非一时半刻。tapable、webpack的生命周期等等。假使你想深切的知晓webpack,推荐腾讯ivweb团队有关webpack的深刻钻研。那也是自家多年来在看的,唯有理解越多,你才能飞的更远。夜深了,时间过的非常快。楼主也太困了,停笔于此,望多多包蕴。附上自身github关于webpack4.0配置的读书demo点这里。

1 赞 3 收藏
评论

威尼斯人线上娱乐 11

2.webpack.config.js

{
test: /\.js$/, 
loader: 'babel-loader', 
include: path.resolve(__dirname, 'src'),
exclude: /node_modules/,

 

}
loader是相比基本的一块内容,它将各种静态能源通过loader转换为js模块,1个loader包罗以下几局地

//引用Node中的path模块

test: 二个匹配loaders所拍卖的公文的拓展名的正则表明式(必须)
loader: loader的名称(必须)
include/exclude:
添加必须处理的公文(文件夹)或屏蔽不须要处理的文件(文件夹)(可选)
query: 为loaders提供额外的安装选项(可选)
1.ES6语法的js babel-loader

const path = require(‘path’);

babel-loader安装相应的包

module.exports={

npm i babel-loader -D
设置babel-core和babel-preset-es二零一四,将ES6的代码转换到ES5

//入口文件配置

npm i babel-core babel-preset-es2015 -D
在module.rules中添加loader节点

entry:{

module: {
rules: [{
test: /.js$/,
loader: ‘babel-loader’,
query: {presets: [‘es2015’]}
}]
}

entry:’./src/entry.js’

  1. 样式 css-loader,style-loader

},

src/assets/css下新建style.css

//出口文件配置

body {
background-color: #ff0;
}
main.js中引入css能源,会报错,因为从没对号入座的loader实行处理

output:{

require(‘./assets/css/style.css’)
添加loader处理

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

npm i css-loader style-loader -D

filename:’bundle.js’

{
test: /.css$/,
loader: ‘style-loader!css-loader’
}
在编写翻译的js代码中大家得以观察

},

/ 4 /
/***/ (function(module, exports, __webpack_require__) {

//模块,例如解读CSS,图片怎样更换,压缩

exports = module.exports = __webpack_require__(1)(undefined);
// imports

module:{},

// module
exports.push([module.i, “body {\n background-color: #ff0;\n}\n”,
“”]);

//插件,用于生产模板和各项机能

// exports

plugins:[],

/***/ }),

//配置webpack开发服务功用

  1. 图片 file-loader url-loader

devServer:{}

url-loader是对file-loader的封装

}

npm i file-loader url-loader -D

 这几个代码写完后,能够在终点中一向输入webpack就会进展打包。

{test: /.(png|jpg)$/, loader: “url-loader?limit=8192”}
如此会将低于8kb的图形直接以base64的格式内嵌到代码中,在一定水平上压缩短图片的央求
main.js中添加代码

多入口文件:

let img1 = document.createElement(‘img’)
img1.src = require(‘./assets/img/icon.png’)
document.body.appendChild(img1)
更多的loaders:

威尼斯人线上娱乐 12

启1个服务webpack-dev-server

 

dist下新建index.html

3.设置webpack-dev-server

<!DOCTYPE html>
<html>
<head>
<title>webpack demo page</title>
</head>
<body>
<script src=”/dist/bundle.js”></script>
</body>
</html>
设置相应的包

 

npm i webpack-dev-server -D
model下增加配置

npm install webpack-dev-server –save-dev

devServer: {
contentBase: path.join(__dirname, ‘dist’),
compress: false,
inline: true,
port: 8080
}
运行

 

node_modules/.bin/webpack-dev-server
打开 页面变为×××
大家可以将以此本子放在package.json中

/webpack.config.js:

“scripts”: {
“start”: “node_modules/.bin/webpack”,
“serve”: “node_modules/.bin/webpack-dev-server”
}

devServer:{

诸如此类我们得以平昔运营

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

npm run serve
投入进度守护nodemon

host:’localhost’,

“scripts”: {
“start”: “nodemon –exec webpack -w webpack.config.js”,
“serve:watch”: “nodemon –exec webpack-dev-server -w
webpack.config.js”
}
页面实时刷新 Hot Module Replacement(HM途锐) 热加载

compress:true,

It’s like LiveReload for every module.
当模块产生变化时,内部存款和储蓄器中的bundle会收到通告,如果不影响到任何页面包车型客车变迁,只会刷新局地,而不要刷新整个页面。
设置hot为true
devServer: {
contentBase: path.join(__dirname, ”),
compress: true,
inline: true,
hot: true, **
port: 8080
},
2.添加到pligins中

port:1717

plugins: [
new webpack.HotModuleReplacementPlugin() //热加载插件
],

}

chrome控制台打开大家得以见到,表达HM冠道已经打开
[HMR] Waiting for update signal from WDS…
[WDS] Hot Module Replacement enabled.
附:webpack修改每回都重启?nodemon守护

在顶峰中输入 webpack-dev-server
。也能够在package.json中’scripts’写’server’:’webpack-dev-server’,然后npm
run server;

nodemon进度守护,用来监督你node.js源代码的任何变更,自动重启服务

 

npm i nodemon -g
nodemon – -exec webpack -w webpack.config.js
此处大家只必要监听webpack.config.js文件的扭转,所以添加-w参数钦点特定的目录大概文件

4.Loaders

进阶

Loaders是webpack的关键意义,通过行使分裂的loader,webpack能够对不一样文件格式进行一定处理。

目录结构

举例:能够把SASS文件写法转换到CSS,而不在使用其余转换工具。

├── src
│ ├── main.js –主入口
│ ├── assets
│ │ ├── css
│ │ └── img
│ ├── libs
│ │ └── util.js –公共措施
│ ├── modules
│ │ ├── login.js –登录页面
│ │ └── product.js –商品页面
├── README.md
├── index.html
├── package.json
├── webpack.config.js
└── yarn.lock

           
能够把ES6,ES7代码,转换来当先50%浏览器包容的JS代码。

  1. 多页应用

           
可以把React中的JSX转换成Javascript代码

entry的布局我们得以是string,object,array类型,前边的例证用到的是string,单个入口,今后大家添加了几个目录及文件

留意:全部的Loaders都亟需在npm中单独安装,并在webpack.config.js中展开配置

entry: {
main: ‘./src/main.js’,
login: ‘./src/modules/login.js’,
product: ‘./src/modules/product.js’
}
上边的输入文件都在src目录下,那么可以设置1个基础目录,相对路径,用于从配置中剖析入口源点(entry
point)和加载器(loader)

示例

context
The base directory (absolute path!) for resolving the entry option. If
output.pathinfo is set, the included pathinfo is shortened to this
directory.
进口文件的基础目录(相对路径!)。假使output.pathinfo设置,值为到该目录的不二法门。
更加多webpack基础配置
context: path.resolve(__dirname, ‘src’),
entry: {
main: ‘./main.js’,
login: ‘./modules/login.js’,
product: ‘./modules/product.js’
}
假若是数组,那么会将数组中的模块合并,并且输出最终2个;要是是object,那么五个输入的key会打包成包的chunk名称。

在src/css文件夹下建立3个index.css

output: {
path: path.join(__dirname, ‘dist’),
publicPath: ‘/’,
filename: ‘[name]-[hash:8].js’,
chunkFilename: ‘[id]-[chunkhash].js’
}
跑webpack会看到dist下生成login-5ccbce5e.js,main-5ccbce5e.js,product-5ccbce5e.js八个公文

接下来在/src/entry.js中首行到场代码:import
css from ‘./css/index..css’;

  1. 简简单单文件扩张名?resolve.extensions

npm install style-loader –save-dev

能够一向写util,而不用util.js, vue文件也足以简单文件名

npm install css-loader –save-dev

resolve: {
extensions: [”, ‘.js’, ‘.vue’]
}

引入代码压缩模块,const uglify =
require(‘uglifyjs-webpack-plugin’); 然后在plugins new uglify();

  1. 文件查找的路线太长?resolve.alias缩减引用路径

    resolve: {
    extensions: [‘.js’, ‘.css’] ,
    alias: {
    ‘libs’: path.resolve(__dirname, ‘src/libs’),
    ‘react’: ‘node_modules/react/react.js’
    }
    那般在src下的别的js文件都能够向来那样引入模块,而不用../libs/util

威尼斯人线上娱乐 13

import { ajax } from ‘libs/util’
机关引入vue/jquery ?ProvidePlugin

 

自动加载模块,ProvidePlugin能够让大家无需引入的意况下,以大局的情势直接采纳模块变量

5.打包HTML文件

new webpack.ProvidePlugin({
Vue: ‘Vue’
})
代码中得以毫不引入vue直接使用vue

只要src目录中有个index.html
那么些HTML文件不应当涵盖别的script引入标签,因为以此职分应该付出webpack来实施:

原地址:

在webpack.config.js中,先引入大家的html-webpack-plugin

const htmlPlugin = require(‘html-webpack-plugin’);

引入后用npm进行安装

npm install html-webpack-plugin -save-dev

说到底在webpack.config.js里对plugins举办插件配置

new htmlPlugin({

          minify:{ removeAttributeQuotes:true},

          hash:true,

          template:’./src/index.html’

})

.. 终端中输入webpack, 在dist文件夹下查看已经转移的文本

 

6.CSS中图纸的拍卖

设若HTML中有<div>里面包车型客车background是url图片地址,

直白用webpack是会报错的,须求运用file-loader和url-loader

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

 

*url-loader已经封装了file-loader的功用(作者也不懂为啥要分开装。。反正上边说那就如此吗)

威尼斯人线上娱乐 14

 

option中的limit会对图片大小判断,要是是四千b以下则会动用Base64编码(也正是一大串乱码)

 

威尼斯人线上娱乐 15

 

7.CSS分离

实际上付出中或然需求我们单独分离出CSS样式

一贯利用npm install安装就足以。

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

设置后在webpack.config.js中用require引入

const extractTextPlugin =
require(‘extract-text-webpack-plugin’);

在plugins属性中进行布署

new
extractTextPlugin(‘/css/index.css’)

然后修改一下原本笔者们的style-loader和css-loader

威尼斯人线上娱乐 16

运作webpack进行打包,dist目录下会生成css文件夹

 

那样的话图片是不会显得的,有四个比较通用的消除措施是:

威尼斯人线上娱乐 17

 

8.HTML中图纸打包

1.如何选择当地环境下的webpack呢?

答:在package.json的”script”中写一行
“build”:”webpack”,然后npm run build

2.怎么着让打包的图样也能在有些文件夹内输出?

答:在url-loader的options里写一行outputPath:’images/'(例如limit:五千,outputPath….)

 

Webpack官方不引进您选拔img标签,而是愿意你完全使用Javascript,

如果采取了带src属性的img标签,那么打包出来的图片是不会展现的。

有一款国人的插件 html-withimg-loader

 

9.打包和分离LESS,SASS

 

1.怎么让webpack-dev-server自动在新的标签页弹出

答:在package.json的“scripts”中 “server”:”webpack-dev-server –open”
加上–open这些参数

 

 

LESS:

npm install less –save-dev

npm install less-loader –save-dev

 

对webpack.config.js实行安顿

{

test:/\.less$/,

use:[{

loader:”style-loader”

},{

loader:”css-loader”

},{

loader:”less-loader”

}]

}

 

在src/css下树立less文件进行编写制定,在entry.js中import less from
‘./css/xxx.less’

进行webpack打包

 

设置分离:

威尼斯人线上娱乐 18

分别后打开dist/css/index.css就能窥见已经更换好了。

 

SASS:

npm install –save-dev node-sass sass-loader

npm install –save-dev sass-loader

 

 

{

test:/\.scss$/,

use:[{

loader:”style-loader”

},{

loader:”css-loader”

},{

loader:”sass-loader”

}]

}

 

分手代码:

{

test:/\.scss/,

use:extractTextPlugin.extract({

use:[{

loader:”css-loader”

},{

loader:”sass-loader”

}],

fallback:”style-loader”

})

}

 

 

 

10.POSTCSS的使用

浏览器的根本:

1.IE Trident
2.Safari Webkit
3.Chrome Blink
4.Firefox Gecko
5.Opera Presto

 

postcss-loader成效是给css3属性加一下浏览器包容的前缀

 

npm install –save-dev(-D) postcss-loader autoprefixer

 

在webpack.config.js同级目录下新建postcss.config.js 

module.exports={

plugins:[

require(‘autoprefixer’),

]

}

 

威尼斯人线上娱乐 19

 

 

11.PurifyCSS的使用

 

npm i -D
purifycss-webpack purify-css

(npm install
–save-dev purifycss-webpack)

(npm install
–save-dev purify-css) 

(必须求设置那七个,因为前边的借助前边的)

 

const PurifyCSSPlugin = require(“purifycss-webpack”);

const glob = require(‘glob’);

 

new PurifyCSSPlugin({

paths:glob.sync(path.join(__dirname,’src/*.html’))

})

 

进展webpack打包,假设css中写了剩余代码而没用到,那么在dist生成的css中则不会有那段冗余的代码

 

 

12.babel的使用

 

npm install –save-dev babel-core
babel-loader babel-preset-es2015 babel-preset-react

 

{

test:/\.(jsx|js)$/,

use:{

loader:”babel-loader”,

options:{

presets:[“es2015″,”react”]

}

},

exclude:/node_modules/

}

 

npm run build

 

因为前期babel配置项大概会比较多,不提出直接写在webpack.config.js的options中

 

提出新建3个.babelrc进展配置

 

babelrc里传出一个目的:

威尼斯人线上娱乐 20

 

(那里写错了,应该是presets,懒得截图了)然后npm run
build,也打包成功了。

 

 

*最近法定推荐的新式的转换器是babel-preset-env,能够转换es7,es8…

 

npm install –save-dev babel-preset-env

 

下一场修改.babelrc

威尼斯人线上娱乐 21

接下来用webpack打包,也不负众望了。

 

 12.DEV-TOOLS

 

source-map 独立 map 行 列(第陆行第1四个字符错误)

cheap-module-source-map 独立 行 不包罗列(第陆行有荒唐)

都生成单身文件

 

例如

威尼斯人线上娱乐 22

 

用webpack打包,在dist目录下会有entry.js.map那些独自的文本。

 

eval-source-map
大概会有总体性和乌兰察布的含有(在开发阶段用,不要在生养上线阶段用) 行 列

cheap-module-eval-source-map  行 不包涵列

 

 

 13.凭借及生育、开发环境

 

npm install –save-dev jQuery 开发环境

npm install –save jQuery 生产条件

 

npm install –production 只设置package.json生产环境中的正视包

 

生儿育女条件的及花费条件的安插:

package.json 注意这些语法, set type=xxx&webpack 

威尼斯人线上娱乐 23

 

webpack.config.js 

威尼斯人线上娱乐 24

 

 

 14.webpack模块化开发

 

例如在src下新建二个alert.js:

function a(){

alert(‘哈!’)}

 

module.exports = a;

 

在entry.js中引入import ss from ‘./alert.js’;

ss();

 

npm run dev…

npm run server…

 

 

在目录下建立一个空文件夹webpack_config,

能够将webpack模块化配置写在那里。

 

在内部新建三个entry_webpack.js

const entry = {};

entry.path = {

     entry: ‘./src/entry.js’

}

 

module.exports = entry;

 

在webpack.config.js中:

const entry = require(‘./webpack_config/entry_webpack.js’);

 

接下来举行配备:

 

威尼斯人线上娱乐 25

 

 14.打包第1方类库

 

npm install –save jquery

在entry.js中,import $ from ‘jquery’,写一些jquery代码。

卷入后就发现能够运作Jq代码了。

 

再有一种情势引入:

在webpack.config.js中:

const webpack = require(‘webpack’);

使用webpack.ProvidePlugin 

威尼斯人线上娱乐 26

 

 

 15.webpack
–watch配置项(热打包)

 

 威尼斯人线上娱乐 27

webpack –watch

 

 

版权banner插件的应用:

首先要const webpack = require(‘webpack’);

威尼斯人线上娱乐 28

 

效果:

威尼斯人线上娱乐 29

 

15.webpack 优化

 

前边学了二种引用Vue和jquery的方法,

 

第2种是在entry.js中import,然后使用。

 

第一种是在plugins中 

new webpack.ProvidePlugin({

$:”jquery”

}),

 

假定entry.js中没用到Jquery语法的代码的话第叁种方法打包后依然占有空间。

其次章方法假若把那段注释掉就不占用空间了。

那里学习一种抽离插件的主意。

 

抽离插件,入口处写法:

 

威尼斯人线上娱乐 30

 使用webpack.optimize.CommonsChunkPlugin,

威尼斯人线上娱乐 31

运行webpack命令

16.集中拷贝静态财富

npm install –save-dev copy-webpack-plugin

const copywebpackPlugin = require(‘copy-webpack-plugin’);

配置:

 

 威尼斯人线上娱乐 32

热更新:

new webpack.HotModuleReplacementPlugin()

 


相关文章

发表评论

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

网站地图xml地图