最近,利用webpack搭建一个简单的集成html,scss与js的脚手架,方便时常做一些简单的开发。
项目结构如下:
--dist
--src
--scss
index.html
index.js
package.json
webpack.config.js
前提至少需要配置css规则和js规则,需要用到style-loader,css-loader以及scss-loader,同时需要安装node-sass模块。
入口文件设置为entry: './src/index.js'
输出文件设置为:
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
publicPath: './'
}
在package.json当中配置三种简易的webpack命令,一种是常规的webpack打包,一种是带–watch的打包,一种为适用于开发环境的webpack-dev-server。
"dev": "webpack-dev-server",
"build": "webpack",
"watch": "webpack --watch"
打包时我用到HtmlWebpackPlugin和MiniCssExtractPlugin两个插件来设置创建打包的html文件与css文件。HtmlWebpackPlugin插件能够设置html模板,在这里也就是基于src目录当中的index.html文件。同时,输出的js文件会被引用在script标签当中。MiniCssExtractPlugin插件能够自定