前面的話
上文介紹了webpack入門，本文將詳細介紹webpack實用配置
版本號
以entry.js打包為bundle.js為例，出口的filename可以設定為[id]、[name]、[hash]、[chunkhash]等替換形式，如下所示
var webpack = require('webpack');
module.exports = {
entry: './entry.js', //入口文件 output: {
path: __dirname,//出口路径filename: '[id]-[name]-[hash].js'//出口名称 }
}# 則出口文件為0-main-0c1dce21f6c5db455fb4.js
# 如果index.html要引用打包後的js文件，由於文件名稱不確定，並不好解決。這時，就需要使用html-webpack-plugin外掛。該插件並不是內建插件，所以需要安裝
npm install html-webpack-plugin
HtmlWebpackPlugin簡化了HTML檔案的創建，以便為webpack套件提供服務。這對於在檔案名稱中包含每次會隨著變異會改變的雜湊的webpack bundle尤其有用
var webpack = require('webpack');var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './entry.js', //入口文件 output: {
path: __dirname,//出口路径filename: '[id]-[name]-[hash].js'//出口名称 },
plugins: [new HtmlWebpackPlugin({
title: 'match',//生成的html文件的标题为'match' filename: 'index.html'//生成的html文件名称为'index.html' })
]
}通過以上的配置，如果在目前路徑，index.html不存在，則生成；如果存在，則替換
[注意]如果htmlwebpackplugin不進行配置，參數為空， plugins: [new HtmlWebpackPlugin()]。預設地，產生的html檔案名稱為'index.html'，標題為'Webpack APP'
【標籤位置】
htmlwebpackplugin外掛程式的常用設定是設定script標籤插入的位置，預設插入到body標籤中，但可以使用inject:'head'，設定插入到head標籤中
var webpack = require('webpack');var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './entry.js', //入口文件 output: {
path: __dirname,//出口路径filename: 'js/[id]-[name]-[hash].js'//出口名称 },
plugins: [new HtmlWebpackPlugin({
inject:'head',//将script标签插入到head标签中 filename: 'index-[hash].html',//生成的html文件名称为'index.html' })
]
}
【圖示設定】
設定favicon屬性，可以設定網頁的小圖示
var webpack = require('webpack');var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './entry.js', //入口文件 output: {
path: __dirname,//出口路径filename: 'js/[id]-[name]-[hash].js'//出口名称 },
plugins: [new HtmlWebpackPlugin({
favicon:'./icon.ico'})
]
}
var webpack = require('webpack');var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './entry.js', //入口文件 output: {
path: __dirname,//出口路径filename: 'js/[id]-[name]-[hash].js'//出口名称 },
plugins: [new HtmlWebpackPlugin({
minify:{
removeComments: true,//删除注释 collapseWhitespace:true//删除空格 }
})
]
}
使用webpack打包後的index.html程式碼如下
nbsp;html><meta><title>Webpack App</title><script></script>範本檔案 HtmlWebpackPlugin除了提供模組版本號碼的功能，還可以使用範本檔案 例如，範本檔案為template.html，內容如下
nbsp;html> <meta> <title>template</title> <script></script> <div>test</div>webpack設定檔如下
var webpack = require('webpack');var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './entry.js', //入口文件 output: {
path: __dirname,//出口路径filename: 'js/[id]-[name]-[hash].js'//出口名称 },
plugins: [new HtmlWebpackPlugin({ filename: 'index-[hash].html',//生成的html文件名称为'index.html' template:'template/template.html'//模板文件为'template.html' })
]
}
產生的index-[hash].html以'template.html'檔為範本
var webpack = require('webpack');var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './entry.js', //入口文件 output: {
path: __dirname,//出口路径filename: 'js/[id]-[name]-[hash].js'//出口名称 },
plugins: [new HtmlWebpackPlugin({
title:'test',
filename: 'index-[hash].html',//生成的html文件名称为'index.html' template:'template/template.html'//模板文件为'template.html' })
]
}
//webpack.config.jsvar webpack = require('webpack');var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './entry.js', //入口文件 output: {
path: __dirname,//出口路径filename: 'js/[id]-[name]-[hash].js'//出口名称 },
plugins: [new HtmlWebpackPlugin({
title:'test',
template:'template/template.html',//模板文件为'template.html' dateData: new Date()
})
]
}//template.htmlnbsp;html>
<meta>
<title></title>
<div></div>
//webpack.config.jsvar webpack = require('webpack');var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './entry.js', //入口文件 output: {
path: __dirname,//出口路径filename: 'js/[id]-[name]-[hash].js'//出口名称 },
plugins: [new HtmlWebpackPlugin({
template:'template/template.html'})
]
}//template.htmlnbsp;html>
<meta>
<title>Document</title>
<div>
</div>
npm install ejs-compiled-loader
var webpack = require('webpack');var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './entry.js', //入口文件 output: {
path: __dirname,//出口路径filename: 'js/[id]-[name]-[hash].js'//出口名称 },
plugins: [new HtmlWebpackPlugin({
template:'ejs-compiled-loader!template/template.html'})
]
}
# 結果如下
多页面
对于多页面来说，一般地，有多个入口文件。不同的html页面输出对应不同的入口文件。 插件plugins()是一个数组，每new一个HtmlWebpackPlugin()，就可以输出一个html页面。这里有两个重要的属性:chunks和excludeChunks，chunks表示所包含的入口文件，excludeChunks表示要排除的入口文件
//webpack.config.jsvar webpack = require('webpack');var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
a:'./src/js/a.js',
b:'./src/js/b.js',
c:'./src/js/c.js'
},
output: {
path: __dirname,//出口路径filename: 'js/[id]-[name]-[hash].js'//出口名称 },
plugins: [new HtmlWebpackPlugin({
filename:'a.html',
template:'src/template/template.html',
title:'this is a',
chunks:['a']
}),new HtmlWebpackPlugin({
filename:'b.html',
template:'src/template/template.html',
title:'this is b',
chunks:['b']
}),new HtmlWebpackPlugin({
filename:'c.html',
template:'src/template/template.html',
title:'this is c',
excludeChunks:['a','b']
}),
]
}结果如下
//a.htmlnbsp;html><meta><title>this is a</title><div></div><script></script>//b.htmlnbsp;html><meta><title>this is b</title><div></div><script></script>//c.htmlnbsp;html><meta><title>this is c</title><div></div><script></script>
内联
在前面的例子中，都是以链接的形式引入入口文件的。有时，为了追求性能，会将其处理为内联的形式。这里就需要安装一个扩展插件html-webpack-inline-source-plugin，专门用来处理入口文件内联的
$ npm install --save-dev html-webpack-inline-source-plugin
该插件的使用很简单，使用require()语句引入后，在插件plugins()新建一个html-webpack-inline-source-plugin对象，然后在html-webpack-plugin对象中添加inlineSource属性即可
inlineSource: '.(js|css)$' // embed all javascript and css inline
//webpack.config.jsvar webpack = require('webpack');var HtmlWebpackPlugin = require('html-webpack-plugin');var HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin');
module.exports = {
entry: './entry.js',
output:{
path: __dirname,//出口路径filename: 'js/[id]-[name]-[hash].js'//出口名称 },
plugins: [new HtmlWebpackPlugin({
inlineSource: '.(js|css)$'}),new HtmlWebpackInlineSourcePlugin()
]
}结果如下
nbsp;html>
<meta>
<title>Webpack App</title>
<script>/******/ (function(modules) { // webpackBootstrap/******/ // The module cache/******/ var installedModules = {};/******//******/ // The require function/******/ function __webpack_require__(moduleId) {/******//******/ // Check if module is in cache/******/ if(installedModules[moduleId]) {/******/ return installedModules[moduleId].exports;/******/ }/******/ // Create a new module (and put it into the cache)/******/ var module = installedModules[moduleId] = {/******/ i: moduleId,/******/ l: false,/******/ exports: {}/******/ };/******//******/ // Execute the module function/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);/******//******/ // Flag the module as loaded/******/ module.l = true;/******//******/ // Return the exports of the module/******/ return module.exports;/******/ }/******//******//******/ // expose the modules object (__webpack_modules__)/******/ __webpack_require__.m = modules;/******//******/ // expose the module cache/******/ __webpack_require__.c = installedModules;/******//******/ // identity function for calling harmony imports with the correct context/******/ __webpack_require__.i = function(value) { return value; };/******//******/ // define getter function for harmony exports/******/ __webpack_require__.d = function(exports, name, getter) {/******/ if(!__webpack_require__.o(exports, name)) {/******/ Object.defineProperty(exports, name, {/******/ configurable: false,/******/ enumerable: true,/******/ get: getter/******/ });/******/ }/******/ };/******//******/ // getDefaultExport function for compatibility with non-harmony modules/******/ __webpack_require__.n = function(module) {/******/ var getter = module && module.__esModule ?/******/ function getDefault() { return module['default']; } :/******/ function getModuleExports() { return module; };/******/ __webpack_require__.d(getter, 'a', getter);/******/ return getter;/******/ };/******//******/ // Object.prototype.hasOwnProperty.call/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };/******//******/ // __webpack_public_path__/******/ __webpack_require__.p = "";/******//******/ // Load entry module and return exports/******/ return __webpack_require__(__webpack_require__.s = 0);/******/ })/************************************************************************//******/ ([/* 0 *//***/ (function(module, exports) {
document.write('It works.')/***/ })/******/ ]);</script>
babel
下面使用babel来进行es最新标准的代码向es5代码的转换，首先需要安装babel核心程序，及babel-loader
npm install babel-loader babel-core
在使用babel-loader进行代码转换之前，要先了解到ecmascript标准变化很快，且浏览器支持情况不同。所以，出现了'es2015'、'es2016'、'es2017'、'latest'、'env(new)'等多个不同的标准。这时，要需要来选择从哪个标准进行转换，需要安装插件babel-preset-env
npm install babel-preset-env
在 webpack 配置对象中，需要添加 babel-loader 到 module 的 loaders 列表中
//webpack.config.jsvar webpack = require('webpack');var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/app.js',
output:{
path: __dirname,//出口路径filename: 'js/[name].bundle.js'//出口名称 },
module:{
loaders:[{
test:/\.js$/,
use:{
loader:'babel-loader',
options:{
presets: ['env']
}
}
}]
},
plugins: [new HtmlWebpackPlugin({})
]
}//app.jslet num = 1; console.log(num);
【打包速度】
运行后，页面控制台输出1，转换正常。但是，babel的转换过程却很慢
前面的博文webpack的四个基本概念，我们介绍过loader的test属性表示该loader必须满足的条件，上面代码中使用/\.js$/ 来匹配，这样也许会去转译 node_modules 目录或者其他不需要的源代码。这样会大大增加webpack的编译时间
要排除 node_modules，就要使用 loaders 配置的 exclude 选项，表示哪些除外，exclude:/node_modules/
[注意]exclude也应该用正则的形式，如果用__dirname +'/node_modules'的形式则不会生效
var webpack = require('webpack');var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/app.js',
output:{
path: __dirname,//出口路径filename: 'js/[name].bundle.js'//出口名称 },
module:{
loaders:[{
test:/\.js$/,
exclude: /node_modules/,
use:{
loader: 'babel-loader',
options:{
presets: ['env']
}
}
}]
},
plugins: [new HtmlWebpackPlugin({})
]
}
当然了，除了exclude选项，也有include选项，能够明确被打包的文件时，使用include将使打包速度更快
对于include来说，它比较特别，字符串形式__dirname + './src/'和正则形式/\.\/src/都支持，经过测试，这两种形式的打包速度类似
var webpack = require('webpack');var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/app.js',
output:{
path: __dirname,//出口路径filename: 'js/[name].bundle.js'//出口名称 },
module:{
loaders:[{
test:/\.js$/,
include:/\.\/src/,
use:{
loader: 'babel-loader',
options:{
presets: ['env']
}
}
}]
},
plugins: [new HtmlWebpackPlugin({})
]
}
CSS
在webpack入门博文中由介绍过CSS插件的简单使用，接下来将详细介绍
首先，要安装css-loader和style-loader，css-loader用于读取并加载css文件，style-loader将它插入到页面中
[特别注意]在处理css时，最好不要使用include、exclude等属性。include、exclude属性是加快babel转换速度的，和css没什么关系，而且会添乱
npm install css-loader style-loader
//app.jsrequire('./css/common.css');//common.cssbody{margin: 0;background-color: red}//webpack.config.jsvar webpack = require('webpack');var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/app.js',
output:{
path: __dirname,//出口路径filename: 'js/[name].bundle.js'//出口名称 },
module:{
rules:[
{
test:/\.css$/, use:[ 'style-loader', 'css-loader' ]
}
]
},
plugins: [new HtmlWebpackPlugin({})
]
}效果如下
【自动前缀】
页面加载CSS往往并不像上面的情况这么简单，需要处理很多问题，其中一个就是浏览器前缀问题。对于某些属性来说，比如transform，不同浏览器的版本对其支持程度不同，浏览器前缀也不同。这时，就需要能够根据实际情况，自动增加前缀，而postcss-loader就是这样的工具，而且功能要强大的多
首先，先安装postcss-loader
npm install postcss-loader
然后，安装postcss的自动前缀的插件autoprefixer
npm install autoprefixer
配置如下
//common.cssbody{transform: scale(0);background-color: red}//app.jsrequire('./css/common.css');//webpack.config.jsvar webpack = require('webpack');var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/app.js',
output:{
path: __dirname,//出口路径filename: 'js/[name].bundle.js'//出口名称 },
module:{
rules:[
{
test:/\.css$/,
use:[ 'style-loader', 'css-loader',
{
loader: 'postcss-loader',
options: {plugins: [require('autoprefixer')]}
}
]
}
]
},
plugins: [new HtmlWebpackPlugin({})
]
}结果如下
如果css文件中出现@import，则有两种处理方式，一种是将postcss文件单独写成配置文件postcss.config.js
//common.css@import './flex.css';
body{transform: scale(0);background-color: red}//flex.cssbody{display:flex;}//app.jsrequire('./css/common.css');//webpack.config.jsvar webpack = require('webpack');var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/app.js',
output:{
path: __dirname,//出口路径filename: 'js/[name].bundle.js'//出口名称 },
module:{
rules:[
{
test:/\.css$/,
use:[ 'style-loader',
{ loader: 'css-loader',
options: {importLoaders: 1}
},'postcss-loader']
}
]
},
plugins: [new HtmlWebpackPlugin({})
]
}//postcss.config.jsmodule.exports = {
plugins:[require('autoprefixer')]
}结果如下
另一种需要安装postcss-import插件
npm install postcss-import
//common.css@import './flex.css';
body{transform: scale(0);background-color: red}//flex.cssbody{display:flex;}//app.jsrequire('./css/common.css');//webpack.config.jsvar webpack = require('webpack');var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/app.js',
output:{
path: __dirname,//出口路径filename: 'js/[name].bundle.js'//出口名称 },
module:{
rules:[
{
test:/\.css$/,
use:[ 'style-loader',
{ loader: 'css-loader',
options: {importLoaders: 1 }
},
{
loader: 'postcss-loader',
options: {plugins: [
require('postcss-import'),
require('autoprefixer')
]
}
}
]
}
]
},
plugins: [new HtmlWebpackPlugin({})
]
}结果如下
【sass】
首先，需要安装sass-loader及node-sass
[注意]关于node-sass安装的问题移步至此
npm install sass-loader node-sass
由于sass-loader中已经自带了关于@import处理的问题。所以，不需要css-loader及postcss-loader的额外处理
//layer.scss@import './flex.scss';
body{
background-color:green;
div{
width: 400px;
}
}//flex.scss.flex{display:flex;}//app.jsrequire('./components/layer/layer.scss');//webpack.config.jsvar webpack = require('webpack');var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/app.js',
output:{
path: __dirname,//出口路径filename: 'js/[name].bundle.js'//出口名称 },
module:{
rules:[
{
test:/\.scss$/,
use:[ 'style-loader',
'css-loader',
{
loader: 'postcss-loader',
options: {plugins: [require('autoprefixer')]}
},'sass-loader' ]
}
]
},
plugins: [new HtmlWebpackPlugin({})
]
}结果如下
【分离CSS】
默认地，CSS作为模块资源被打包到入口js文件中。有时，需要把CSS文件分离出来，这时就需要用到extract-text-webpack-plugin插件
npm install extract-text-webpack-plugin
该插件的配置如下
var webpack = require('webpack');var HtmlWebpackPlugin = require('html-webpack-plugin');var ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: './src/app.js',
output:{
path: __dirname,//出口路径filename: 'js/[name].bundle.js'//出口名称 },
module:{
rules:[
{
test:/\.scss$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use:[ 'css-loader',
{
loader: 'postcss-loader',
options: {plugins: [require('autoprefixer')]}
},'sass-loader' ]
})
}
]
},
plugins: [new HtmlWebpackPlugin({}),new ExtractTextPlugin("styles.css?1.1.11")
]
}结果如下，该插件将入口文件中引用的 *.css，移动到独立分离的 CSS 文件。因此，你的样式将不再内嵌到 JS bundle 中，而是会放到一个单独的 CSS 文件（即 styles.css）当中。 如果样式文件大小较大，这会做更快提前加载，因为 CSS bundle 会跟 JS bundle 并行加载
图片资源
webpack在处理图片、音乐、电影等资源文件时，需要使用file-loader
npm install file-loader
默认情况下，使用file-loader生成的文件的文件名就是文件内容的MD5哈希值并保留原始扩展名
以引入图片资源例，有以下几种情况
1、通过css文件的background属性引入
//webpack.config.jsvar webpack = require('webpack');var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './entry.js', //入口文件 output: {
path: __dirname,//出口路径filename: 'js/[id]-[name]-[hash].js'//出口名称 },
module:{
rules:[
{
test:/\.css$/,
use:[ 'style-loader', 'css-loader' ]
},
{
test:/\.(png|jpg|gif|svg)$/i,
use:'file-loader' }
]
},
plugins: [new HtmlWebpackPlugin()
]
}//entry.jsrequire('./src/css/common.css');//common.cssbody{background: url('../img/eg_bulbon.gif')}结果如下
2、通过模板html文件img标签引入，这时需要使用${require('')}将相对路径包裹一次
//webpack.config.jsvar webpack = require('webpack');var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './entry.js', //入口文件 output: {
path: __dirname,//出口路径filename: 'js/[id]-[name]-[hash].js'//出口名称 },
module:{
rules:[
{
test:/\.css$/,
use:[ 'style-loader', 'css-loader' ]
},
{
test:/\.(png|jpg|gif|svg)$/i,
use:'file-loader' }
]
},
plugins: [new HtmlWebpackPlugin({
template:'template/template.html'})
]
}//template.htmlnbsp;html>
<meta>
<title>Document</title>
<img src="/static/imghwm/default1.png" data-src="${require('../src/img/eg_bulbon.gif')}" class="lazy" alt="詳細介紹webpack實用配置" >
结果如下
3、若模板使用ejs-compiled-loader插件，则无法使用${require('')}语句，需要使用HtmlWebpackPlugin传参来构造绝对路径
//webpack.config.jsvar webpack = require('webpack');var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './entry.js', //入口文件 output: {
path: __dirname + '/dist',//出口路径filename: 'js/[id]-[name]-[hash].js'//出口名称 },
module:{
rules:[
{
test:/\.css$/,
use:[ 'style-loader', 'css-loader' ]
},
{
test:/\.(png|jpg|gif|svg)$/i,
use:'file-loader' }
]
},
plugins: [new HtmlWebpackPlugin({
template:'ejs-compiled-loader!template/template.html',
file:__dirname
})
]
}//template.htmlnbsp;html>
<meta>
<title>Document</title>
<div>
</div>
//header.html<img src="/static/imghwm/default1.png" data-src="<%=htmlWebpackPlugin.options.file%>\src\img\eg_bulbon.gif" class="lazy" alt="詳細介紹webpack實用配置" >结果如下
【file-loader参数】
文件名模板占位符有如下几种
[ext] 资源扩展名 [name] 资源的基本名称 [path] 资源相对于 context 查询参数或者配置的路径 [hash] 内容的哈希值，默认为十六进制编码的 md5 [<hashtype>:hash:<digesttype>:<length>] 可选配置 其他的 hashType, 即 sha1, md5, sha256, sha512 其他的 digestType, 即 hex, base26, base32, base36, base49, base52, base58, base62, base64 length 字符的长度 [N] 当前文件名按照查询参数 regExp 匹配后获得到第 N 个匹配结果</length></digesttype></hashtype>
{
test:/\.(png|jpg|gif|svg)$/i,
use:[{
loader:'file-loader',
options: {
name:'[name]-[hash:5].[ext]'}
}]
}或者
{
test:/\.(png|jpg|gif|svg)$/i,
use:['file-loader?name=[name]-[hash:5].[ext]']
}结果如下
【url-loader】
url-loader功能类似于file-loader，但是在文件大小(单位byte)低于指定的限制时，可以返回一个dataURL
可以通过传递查询参数(query parameter)来指定限制（默认为不限制）。
如果文件大小超过限制，将转为使用 file-loader，所有的查询参数也会传过去
npm install url-loader
图片的大小为1.1kb，下面将限制设置为2000，则图片将以base64格式传递
{
test:/\.(png|jpg|gif|svg)$/i,
use:['url-loader?limit=2000']
}结果如下
如果将限制大小设置为1000，图片以src的形式传递
{
test:/\.(png|jpg|gif|svg)$/i,
use:[{
loader:'url-loader',
options: {
limit:1000,
name:'[name]-[hash:5].[ext]'}
}]
}
【image-webpack-loader】
使用image-webpack-loader来压缩图片
npm install image-webpack-loader
插件一张大小为4.1kb的名称为'm.jpg'的图片，配置如下
{
test:/\.(png|jpg|gif|svg)$/i,
use:['url-loader?limit=1000&name=[name]-[hash:5].[ext]','image-webpack-loader'
]
}结果如下所示，生成大小为3.28kb，名称为'm-c7083.jpg'的图片
实用配置
下面将使用webpack搭建一个实用的开发环境
var webpack = require('webpack');var HtmlWebpackPlugin = require('html-webpack-plugin');var ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: './src/app.js',//入口文件 output:{
path: __dirname,//出口路径filename: 'js/[name].bundle.js'//出口名称 },
module:{
rules:[
{
test:/\.scss$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use:[
'css-loader',
{
loader: 'postcss-loader',//自动添加前缀options: {plugins: [require('autoprefixer')]}
},'sass-loader']
})
},
{
test:/\.js$/,
include:/\.\/src/,
use:{
loader: 'babel-loader',//将最新标准的js代码翻译为es5代码options:{presets: ['env']}
}
},
{
test:/\.(png|jpg|gif|svg)$/i,
use:[//当图片大小大于1000byte时，以[name]-[hash:5].[ext]的形式输出//当图片大小小于1000byte时，以baseURL的形式输出'url-loader?limit=1000&name=[name]-[hash:5].[ext]',//压缩图片'image-webpack-loader']
}
]
},
plugins: [ //使用模板生成html文件new HtmlWebpackPlugin({template:'ejs-compiled-loader!template/template.html'}),//分离出css到style.cssnew ExtractTextPlugin("style.css?1.1.11")
]
}
以上是詳細介紹webpack實用配置的詳細內容。更多資訊請關注PHP中文網其他相關文章！
Python vs. JavaScript：開發環境和工具Apr 26, 2025 am 12:09 AMPython和JavaScript在開發環境上的選擇都很重要。 1)Python的開發環境包括PyCharm、JupyterNotebook和Anaconda，適合數據科學和快速原型開發。 2)JavaScript的開發環境包括Node.js、VSCode和Webpack，適用於前端和後端開發。根據項目需求選擇合適的工具可以提高開發效率和項目成功率。
JavaScript是用C編寫的嗎？檢查證據Apr 25, 2025 am 12:15 AM是的，JavaScript的引擎核心是用C語言編寫的。 1）C語言提供了高效性能和底層控制，適合JavaScript引擎的開發。 2）以V8引擎為例，其核心用C 編寫，結合了C的效率和麵向對象特性。 3）JavaScript引擎的工作原理包括解析、編譯和執行，C語言在這些過程中發揮關鍵作用。
JavaScript的角色：使網絡交互和動態Apr 24, 2025 am 12:12 AMJavaScript是現代網站的核心，因為它增強了網頁的交互性和動態性。 1)它允許在不刷新頁面的情況下改變內容，2)通過DOMAPI操作網頁，3)支持複雜的交互效果如動畫和拖放，4)優化性能和最佳實踐提高用戶體驗。
C和JavaScript：連接解釋Apr 23, 2025 am 12:07 AMC 和JavaScript通過WebAssembly實現互操作性。 1）C 代碼編譯成WebAssembly模塊，引入到JavaScript環境中，增強計算能力。 2）在遊戲開發中，C 處理物理引擎和圖形渲染，JavaScript負責遊戲邏輯和用戶界面。
從網站到應用程序：JavaScript的不同應用Apr 22, 2025 am 12:02 AMJavaScript在網站、移動應用、桌面應用和服務器端編程中均有廣泛應用。 1)在網站開發中，JavaScript與HTML、CSS一起操作DOM，實現動態效果，並支持如jQuery、React等框架。 2)通過ReactNative和Ionic，JavaScript用於開發跨平台移動應用。 3)Electron框架使JavaScript能構建桌面應用。 4)Node.js讓JavaScript在服務器端運行，支持高並發請求。
Python vs. JavaScript：比較用例和應用程序Apr 21, 2025 am 12:01 AMPython更適合數據科學和自動化，JavaScript更適合前端和全棧開發。 1.Python在數據科學和機器學習中表現出色，使用NumPy、Pandas等庫進行數據處理和建模。 2.Python在自動化和腳本編寫方面簡潔高效。 3.JavaScript在前端開發中不可或缺，用於構建動態網頁和單頁面應用。 4.JavaScript通過Node.js在後端開發中發揮作用，支持全棧開發。
C/C在JavaScript口譯員和編譯器中的作用Apr 20, 2025 am 12:01 AMC和C 在JavaScript引擎中扮演了至关重要的角色，主要用于实现解释器和JIT编译器。1）C 用于解析JavaScript源码并生成抽象语法树。2）C 负责生成和执行字节码。3）C 实现JIT编译器，在运行时优化和编译热点代码，显著提高JavaScript的执行效率。
JavaScript在行動中：現實世界中的示例和項目Apr 19, 2025 am 12:13 AMJavaScript在現實世界中的應用包括前端和後端開發。 1)通過構建TODO列表應用展示前端應用，涉及DOM操作和事件處理。 2)通過Node.js和Express構建RESTfulAPI展示後端應用。
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
mPDF
mPDF是一個PHP庫，可以從UTF-8編碼的HTML產生PDF檔案。原作者Ian Back編寫mPDF以從他的網站上「即時」輸出PDF文件，並處理不同的語言。與原始腳本如HTML2FPDF相比，它的速度較慢，並且在使用Unicode字體時產生的檔案較大，但支援CSS樣式等，並進行了大量增強。支援幾乎所有語言，包括RTL（阿拉伯語和希伯來語）和CJK（中日韓）。支援嵌套的區塊級元素（如P、DIV），
SecLists
SecLists是最終安全測試人員的伙伴。它是一個包含各種類型清單的集合，這些清單在安全評估過程中經常使用，而且都在一個地方。 SecLists透過方便地提供安全測試人員可能需要的所有列表，幫助提高安全測試的效率和生產力。清單類型包括使用者名稱、密碼、URL、模糊測試有效載荷、敏感資料模式、Web shell等等。測試人員只需將此儲存庫拉到新的測試機上，他就可以存取所需的每種類型的清單。
VSCode Windows 64位元 下載
微軟推出的免費、功能強大的一款IDE編輯器
SublimeText3漢化版
中文版，非常好用
WebStorm Mac版
好用的JavaScript開發工具
