1、css编译使用的包
css-loader //加载.css文件
style-loader //使用style标签将css-loader内部样式注入到我们的HTML页面
2、html编译使用的包
html-loader //加载html文件
{
loader:’html-loader’, //加载.html文件
options:{
attrs:[“img:src”]
}
}
extract-loader //将此文件和bundle.js区分开来
file-loader //起名字使用
3、img加载使用的包
首先需要在html-loader中声明
file-loader 将图片放置在某个文件夹中 并起名字
或者url-loader
{
loader:’url-loader’, //可以直接生成base64图片(小于limit)
options:{
limit:1024,
name:’[name]-[hash:8].[ext]’
}
}
4、js加载使用的包
babel-preset-env
5、cross-env
在package.json文件设置变量:
“scripts”: {
“test”: “echo \”Error: no test specified\” && exit 1”,
“build”: “cross-env NODE_ENV=production webpack –config webpack.config.js”,
“dev”: “cross-env NODE_ENV=development webpack-dev-server –config webpack.config.js”
},
在webpack.config.js获取
const isDev=process.env.NODE_ENV === “development”
变量设置为所有js都可以访问:
new webpack.DefinePlugin({
“process.env”:{
NODE_ENV:isDev?‘“development”’:‘“production”’
}
}),
6、生成html插件
html-webpack-plugin 引入此插件将自动生成一个html页面 将打包好的bundle.js引入
7、打开.vue页面还需要配置:
VueLoaderPlugin() 插件 代码: const { VueLoaderPlugin } = require(‘vue-loader’)
8、webpack-dev-server基本配置
config.devtool =”#cheap-module-eval-source-map” //调试
config.devServer ={
port:’8888’,
host:”0.0.0.0”,
overlay:{
errors:true
},
open:true, //直接打开页面
// historyFallback:{ //没设置的页面定义到哪里
// },
hot:true //改变页面只加载本模块内容
}
config.plugins.push(
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin()
)