webpack-1

1.webpack 安装
新项目
npm install --save-dev webpack
如果版本较老，在package,json中找到版本号，修改成你要的版本号，在删除node-model文件夹，执行npm install即可

2.简单打包
需要把dist下的main.js（打包后的文件所放的目录）先建立出，index.html中打包文件是main.js

配置文件：入口和出口
3.上述打包基本不用，应该直接写配置文件(webpack.config.js),当多入口自然多出口， path:path.resolve(__dirname,'dist'),得出到dist文件夹的绝对路径
filename: '[name].js'，表示打包文件名字和入口文件名一致

4.配置文件：服务和热更新
实时加载webpack-dev-server
需要npm安装，webpack.config.js里进行配置，在package.json中配置

5.loaders 安装后，只需要在配置文件的module中引入即可
Loaders是一种转换器。将一种文件转换成另外一种
同上面一样，只是不需要在package.json中配置
CSS和fonts以及图片等，通过合适的loaders，它们都可以被当做模块被处理。
style-loader:它是用来处理css文件中的url()等
css-loader:它是用来将css插入到页面的style标签

3.图片处理打包：（css中图片打包，如background-image,html中的图片打包）
在设置图片css时要设置宽高，不然容易出不来

上述方式中，图片只是被打包，路径还是相对路径
所以当需要提取出css时，要把css从js代码中分离出来，以及css中的图片路径问题要用到插件（extract-text-webpack-plugin），不是loaders

html中的图片
6.插件配置：配置文件中需要
const htmlPlugin= require('html-webpack-plugin');这样引入后，再进行安装，安装后再进行插件配置
如html文件压缩
new htmlPlugin({
minify:{
removeAttributeQuotes:true
},
hash:true,
template:'./src/index.html'

})

1.压缩js代码，
2.HTML文件，删除其中引入的js文件，打包之后在dist中生成 index.html文件，其中会自动引入需要的js文件

巴特西

webpack-1

最新文章

热门文章