相信经常使用webpack的人已经深刻体验到自动化工具给我们带来的便利。我自己最常用的是vue,平时就是使用vue-cli或者nuxt构建的项目,聪明的前辈已经为我们配好了项目,可以让我们不必去配置就可以轻松使用。
然而在真正的项目中,我们常常需要写一些简单的页面,并不基于vue这样比较大的框架,比如我明天上班就要做的这个公众号介绍,只有几个页面,但是我又希望能使用webpack来辅助我更好完成工作,在今后的工作中也基于这个demo来进行开发,所以今天就来简单的配置一下webpack。
我现在做的这个项目只有简单的两个页面,不基于任何框架。
about.html,
contact.html
1-npm init webpack-config-demo 初始化项目
2-新建webpack.config webpack配置文件
3.在webpack.config写入配置,我的基础配置如下:
var webpack = require('webpack'); const path = require('path') const HtmlWebpackPlugin = require('html-webpack-plugin'); const ExtractTextPlugin = require("extract-text-webpack-plugin"); const CleanWebpackPlugin = require('clean-webpack-plugin'); module.exports = { // 配置入口 entry: { about: './src/pages/about/about.js', contact: './src/pages/contact/contact.js' }, // 配置出口 output: { path: __dirname + "/dist/", filename: 'js/[name]-[hash:5].js', publicPath: '/', }, module: { loaders: [ //解析.js { test: '/\.js$/', loader: 'babel', exclude: path.resolve(__dirname, 'node_modules'), include: path.resolve(__dirname, 'src'), query: { presets: ['env'] } }, // css处理 { test: /\.css$/, loader: 'style-loader!css-loader' }, // less处理 { test: /\.less$/, loader: 'style-loader!css-loader!less-loader' }, // 图片处理 { test: /\.(png|jpg|gif|svg)$/, loader: 'file-loader', query: { name: 'assets/[name]-[hash:5].[ext]' }, },{ test: /\.(htm|html)$/i, use:[ 'html-withimg-loader'] } ] }, plugins: [ new ExtractTextPlugin(__dirname + '/assert/css/common.less'), // minify:{ // removeComments: true,//删除注释 // collapseWhitespace:true//删除空格 // } new HtmlWebpackPlugin({ filename: __dirname + '/dist/about.html', inject: 'head', template: 'html-withimg-loader!'+__dirname + "/src/pages/about/about.html", chunks: ['about'], inlineSource: '.(js|css)$' }), new HtmlWebpackPlugin({ inject: 'head', filename: __dirname + '/dist/contact.html', template: __dirname + "/src/pages/contact/contact.html", chunks: ['contact'], inlineSource: '.(js|css)$' }), //设置每一次build之前先删除dist new CleanWebpackPlugin( ['dist/*', 'dist/*',], //匹配删除的文件 { root: __dirname, //根目录 verbose: true, //开启在控制台输出信息 dry: false //启用删除文件 } ) ], // 起本地服务,我起的dist目录 devServer: { contentBase: "./dist/", historyApiFallback: true, inline: true, hot: true, host: '192.168.1.107',//我的局域网ip } }4-在package.json中配置npm 命令
"scripts": { "build": "webpack", "dev": "webpack-dev-server --hot --inline --watch" },意思是执行npm run build的时候执行webpack的打包,
执行npm run dev的时候本地起一个服务器,--host --watch实现热加载。
注意:起的ip你可以在以下:
// 起本地服务,我起的dist目录 devServer: { contentBase: "./dist/", historyApiFallback: true, inline: true, hot: true, host: '192.168.1.107',//我的局域网ip }中配置你的host,然后在局域网中可以通过这个地址访问到你的项目,我指的是,同个局域网中的,在调试移动端真机的时候 就很有用,比如 your phone。热加载可以让你实现多端自动刷新,很方便。
目录如下:
本次项目是简单基础的配置,不过已经满足了我本次项目的需求。在后续的工作中还会根据需要再配置,并实时更新github。
项目地址:https://github.com/nongweiyi/webpack-config-demo
与我交流:653324597
预览:
https://nongweiyi.github.io/webpack-config-demo/dist/about.html
https://nongweiyi.github.io/webpack-config-demo/dist/contact.html