webpack3基础实例
const path = require('path') const HtmlWebpackPlugin = require('html-webpack-plugin') const CleanWebpackPlugin = require('clean-webpack-plugin') //npm i webpack@3 --save-dev //插件需要引入,loader不需要 //css-loader styleloader //file-loader url-loader //webpack-dev-server //html-webpack-plugin clean-webpack-plugin module.exports = { entry: './src/js/entry.js', //入口文件位置 output: { //输出位置 filename: "bundle.js", //文件名 // publicPath: "js/" 具有强制寻找文件性,一般不用 path: path.resolve(__dirname, 'src/build/') //完整路径 }, module: { rules: [ { test: /\.css$/, use: [ 'style-loader', //加载好的css添加style放入头部 'css-loader', //加载整合css模块 ] }, { test: /\.(png|jpg|gif)$/, use: [{ loader: 'url-loader', //file-loader的上层语法糖, options: { limit: 8192 //过大(8kb)转换为base64字符串 } } ] } ] }, devServer: { contentBase: 'src/build'//热加载 //会在虚拟内存中生成bundle.js和原来没关系(注意index.html的引入script标签的方式) //webpack-dev-server默认服务于根目录的index.html,可自行配置contentBase //webpack-dev-server --open新窗口打开热加载 }, plugins: [ new HtmlWebpackPlugin({template: './index.html'}), //根据模板生成新的页面,自动添加<script> new CleanWebpackPlugin(['src/build']) //先删除文件夹,再进行打包编译 ] }