-
webpack配置的entry和output new
1、entry三种配置方式：
① entry:'./src/main.js'
② entry:['./src/main.js','./src/main2.js']
③ entry:{ app:'./src/app.js', search:'./src/search.js'}
2、output对应上述三个entry的配置
① output:{ path:'./dist/js', filename:'bundle.js'}
③ output:{path:'./dist/js', filename:[name]-[hash/chunkhash].js'}
查看全部 -
使用npm命令打包：
在package.json中也可配置webpack打包规则，使用命令 npm run webpack 打包
查看全部 -
项目文件组织
dist：放置打包后的静态资源文件
src_script：放置项目js脚本文件
src_style：放置项目样式文件
src_index.html：初始化页面，引用打包后的静态资源文件
src_package.json：
src_webpack.config.js：webpack配置文件
entry：设置入口js文件
output-path：打包后的文件放置路径
output-filename：打包后的文件名称
运行webpack即可实现打包
若存在多个webpack配置文件，如webpack.dev.config.js，打包时应使用命令webpack --config webpack.dev.config.js指定使用的配置文件
查看全部 -
webpack命令参数：
webpack XX.js XX.bundle.js --module-bind 'css=style-loader!css-loader' --watch
--module-bind ：替代require('style-loader!css-loader!./XX.css')
--watch：文件改变自动重新打包
--progress：显示打包进度
--display-modules：打包完毕后显示引用的全部模块
--display-reasons：打包后显示打包各个模块的原因
查看全部 -
webpack不支持css打包，需要配合loader才能使用
安装：npm install css-loader style-loader --save-dev
js中css文件依赖：require('style-loader!css-loader!./XX.css')
style-loader：使依赖的css文件样式生效
css-loader：使webpack有能力打包css文件
也可使用webpack命令实现：webpack XX.js XX.bundle.js --module-bind 'css=style-loader!css-loader'
查看全部 -
安装webpack：npm init，npm install webpack --save-dev
打包文件：webpack XX.js XX.bundle.js
js文件依赖：require('./XX.js')
查看全部 -
命令行指定loader处理css文件
查看全部 -
1.前端打包工具 2.可以加载指定的页面资源查看全部
-
ok查看全部
-
2020-06-30 00:22
查看全部 -
publicpath
查看全部 -
遍历 htmlwebpackplugin 上的key value
查看全部 -
hash and chunkhash
查看全部 -
多页面配置
查看全部
举报