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>