-
安装: npm init -y npm install webpack --save-dev 命令行: webpack hello.js hello.bundle.js查看全部
-
1-2、webpack安装和命令
查看全部 -
MD5就可以为任何文件(不管其大小、格式、数量)产生一个同样独一无二的“数字指纹”,如果任何人对文件做了任何改动,其MD5值也就是对应的“数字指纹”都会发生变化。
查看全部 -
webpack安装
1、局部安装:
npm i -D (npm install --save-dev的简写)
安装指定版本:npm i -D webpack @version
安装最新版:npm i -D webpack
安装最新体验版本:npm i -D webpack @beta
2、全局安装:
npm i -g webpack
如果 webpack 安装在全局,那么 CLI 也需要装在全局,命令为:npm i webpack-cli -g
查看全部 -
在webpack 4.0 之前 ,打包命令为npm demo.js bundle.js,如果安装的是最新的webpack4.0,需要使用webpack demo.js -o demo.bundle.js 进行打包
查看全部 -
webpack hello.js hello boundle.js css打包需要style.loader!css.loader/insex.css查看全部
-
sass @import 进的sass 文件不需要在css-loader 配置importloader 参数,sass -loader 本身就可以处理@import 进来的sass查看全部
-
参数importLoaders的值是个数值,指的是在css-loader 之后,指定处理@import 进来的css 的loader 的数量查看全部
-
importLoaders查看全部
-
hash是相同的,chunkhash文件名hash值各不相同,并且下次打包只更改修改过的文件的hash
查看全部 -
webpack hello.js --output-filename hello.bundle.js --output-path . --mode development
require("./world.js")
require("style-loader!css-loader!./css.css")
webpack其他参数,如--watch 每次更改内容,自动打包
查看全部 -
使用:
1、在webpack.config.js里配置entry,output。
const path = require('path')
var htmlWebpackPlugin = require('html-webpack-plugin’)//用于生成html文件
module.exports = {
mode: "development",
entry: {//入口
page1: path.resolve(__dirname, 'src/index.js'),
page2: path.resolve(__dirname, 'src/a.js'),
},
output: {//出口,即打包到哪个文件夹,打包后叫什么名字
path: path.resolve(__dirname, 'dist’),//要写成绝对路径
filename: 'js/[name].js’//可通过占位符如[name]\[hash]\[chunkhash]来区别不同的打包文件名
},
plugins: [
new htmlWebpackPlugin({
template:'index.html’,//使用哪个html模版
filename:'index.html’,//打包后生成的html文件名
title:'hello world' //可向模版传参,模版通过ejs写法获取展示,<%=%>
})
],
}
查看全部 -
babel
指定js编译版本
.babelrc {'presets':['lastest']}
查看全部 -
1.webpack命令
2. js中直接用loader
3.webpack命令中指定loader
4. webpack其他参数,如--watch 每次更改内容,自动打包
查看全部 -
chunks : ['a'] 规定chunks
excludeChunks: ['a', 'b'] 排除掉a,b
查看全部
举报