webpack2.0学习

Posted 2020-10-09 szchenrong

1.进到指定的目录下，新建自己的文件名

mkdir webpack-test 创建你的项目名称或者你己有的项目名称
cd webpack-test

npm init
npm install webpack --save--dev

打包文件
webpack hello.js hello.bundle.js

一个脚本引入另一个脚本
require(‘./hello.js‘);

一个js里引入css样式的时候需要安装css-loader
在js里写require(‘./style.css‘);
这时候报错是因为没有安装依赖css-loader style-loader

然后安装
npm set registry https://registry.npm.taobao.org # 注册模块镜像
npm set disturl https://npm.taobao.org/dist # node-gyp 编译依赖的 node 源码镜像
npm cache clean # 清空缓存

npm install css-loader style-loader --save--dev

webpack hello.js hello.bundle.js --module-bind ‘css=style-loader!css-loader‘ 在命令行指定loader

webpack hello.js hello.bundle.js --module-bind ‘css=style-loader!css-loader‘ --watch 监听数据更新，重新打包,每一次更新之后，都会重新打包数据

webpack hello.js hello.bundle.js --module-bind ‘css=style-loader!css-loader‘ --process 打包的过程

webpack hello.js hello.bundle.js --module-bind ‘css=style-loader!css-loader‘ --process --display-modules引用的所有的模块

webpack hello.js hello.bundle.js --module-bind ‘css=style-loader!css-loader‘ --process --display-reasons打包的原因

 

var path = require(‘path‘);
module.exports={

entry:‘./src/script/main.js‘,
output:{
path:path.resolve(__dirname, ‘dist/js‘),//取相对路径
filename:‘[name].js‘
}
}

当webpack.config.js更名为webpack.devconfig.js
webpack --config webpack.devconfig.js

 

pacage.js

"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"webpack":"webpack --config webpack.config.js --progress --display-modules --colors --display-reasons"
},

再执行npm run webpack

命令行输入webpack和npm run webpack是一个意思吗
webpack命令写入到package.json的scripts标签中去了

 

webpack引用插件htmlwebpackplugin

安装插件
npm install html-webpack-plugin --save--dev

webpack.confgi.js里引用
var htmlwebpackplugin=require(‘html-webpack-plugin‘)

使用在webpack.config.js里
var htmlwebpackplugin=require(‘html-webpack-plugin‘);

plugins:[
new htmlwebpackplugin({
// filename:‘index-[hash].html‘,
inject:‘body‘,//把脚本放在头部还是放在body标签 里
// title:‘陈蓉你好啊!‘,
minify:{
removeComments:true,
collapseWhitespace:true
},
date:new Date(),
template:‘index.html‘

})
]

Q:我添加了去掉注释和去掉空格，没有起作用？
Q:我在页面里引用了模板引擎时没有起作用<%= htmlwebpackplugin.options.date%>
Q:在页面indext.html指向某个文件的时候没有效果
<script type="text/javascript" src="htmlwebpackplugin.files.chunks.a.entry"></script>