内容简介:学习了下webpack华丽花哨让人头疼的基础配置,赶紧来做个记录。 先初始化package.json,再安装个webpack和webpack-dev-server:安装完成后在根目录下建立个webpack.config.js,我们来看看基础配置项都有哪些。文件入口是src目录下的index.js,打包好的js都放入static目录下的js目录中。
学习了下webpack华丽花哨让人头疼的基础配置,赶紧来做个记录。 先初始化package.json,再安装个webpack和webpack-dev-server:
npm init -y npm i webpack webpack-dev-server -D //-D只在开发时使用 复制代码
安装完成后在根目录下建立个webpack.config.js,我们来看看基础配置项都有哪些。
基本配置模块
let path = require('path') //webpack遵循node规范,使用require进行引入 module.exports = { entry: './src/index.js', //入口 output: { filename: "js/[name][hash:8].js", //给输出的js打hash号 path: path.resolve('./static') //必须是绝对路径 }, //出口 devServer: {}, //开发服务器 module: {}, //模块配置 plugins: [], //插件配置 mode: "development", //可以更改模式 resolve: {}, //配置解析 } 复制代码
文件入口是src目录下的index.js,打包好的js都放入static目录下的js目录中。
在package.js中配置相关命令,到时候只需要在命令行输入npm run xxx就可以执行了。
{ ... "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "webpack ", "start": "webpack-dev-server" } ... } 复制代码
服务器配置
接下来给服务器进行配置。
module.exports = { ... devServer: {//webpack-dev-server配置 contentBase: './dev', //运行时文件打包文件夹(不可见) port: 6767, //运行端口 compress: true, //服务器压缩 open: true, //自动打开浏览器 hot: true //热更新}, //开发服务器 } ... } 复制代码
配置完成后在命令行输入npm run start就可以启动服务器。
plugins插件配置
plugins 选项用于以各种方式自定义 webpack 构建过程。webpack 附带了各种内置插件,可以通过 webpack.[plugin-name] 访问这些插件。
先将插件进行安装:
npm i html-webpack-plugin clean-webpack-plugin extract-text-webpack-plugin copy-webpack-plugin -D 复制代码
let HtmlWebpackPlugin = require('html-webpack-plugin') //html-webpack-plugin html自动引入打包的js let CleanWebpackPlugin = require('clean-webpack-plugin') //清除旧的打包js let webpack = require('webpack') let ExtractTextWebpackPlugin = require('extract-text-webpack-plugin') //打包成单独css/less文件 let CopyWebpackPlugin = require('copy-webpack-plugin') //将原文件复制到打包文件夹 module.exports = { ... plugins: [ new CopyWebpackPlugin([ { from: './src/doc', //需要复制的文件地址 to: './' //打算复制到的地方 } ]), new ExtractTextWebpackPlugin({ filename: 'css/index.css', //打包后的文件 disable: true //开发时不需要使用单独打包,可以开启disable属性 }), new webpack.HotModuleReplacementPlugin(), //热更新插件 new CleanWebpackPlugin(), //清除旧的打包js new HtmlWebpackPlugin({ filename: "index.html", //生成的html名字 template: "./src/index.html", //模板html所在位置 title: "index", //更改html对应title hash: true, //给js打版本号! minify: { //压缩 removeAttributeQuotes: true, //删掉属性双引号 collapseWhitespace: true //折叠空行 }, }),//html-webpack-plugin html自动引入打包的js ], //插件配置 ... } 复制代码
如果想要查看插件的文档,可以打开地址https://www.npmjs.com/package/包名字,进行查看,例如: www.npmjs.com/package/htm…
module模块配置
要想配置处理模块的规则,我们就在module中进行配置。 先安装需要插件:
npm i extract-text-webpack-plugin css-loader style-loader postcss-loader less-loader autoprefixer -D 复制代码
let ExtractTextWebpackPlugin = require('extract-text-webpack-plugin') //打包成单独css/less文件 module.exports = { ... module: { rules: [ //从右往左解析 { test: /\.css$/, use: ExtractTextWebpackPlugin.extract({ fallback: 'style-loader', use: [ {loader: "css-loader"}, {loader: "postcss-loader"} //加前缀 ] }) }, { test: /\.less$/, use:ExtractTextWebpackPlugin.extract({ fallback: 'style-loader', use: [ {loader: "css-loader"}, {loader: "postcss-loader"}, //加前缀 {loader: "less-loader"} ] }) } ] }, //模块配置 ... } 复制代码
希望给css自动加上浏览器可以识别的前缀则需要在postcss-loader中使用autoprefixer插件。postcss-loader的使用需要在根目录下建立postcss.config.js,配置如下:
module.exports = { plugins: [ require('autoprefixer') ] } 复制代码
重新启动服务器就会自动给css加上前缀。
如果你还想把px转换成rem,可以加上postcss-pxtorem插件:
npm i postcss-pxtorem -D 复制代码
postcss.config.js配置如下:
const pxtorem = require('postcss-pxtorem'); module.exports = { plugins: [ require('autoprefixer'), pxtorem({ rootValue: 32, //根元素 unitPrecision: 5, //保留小数位 // selectorBlackList: ['van'], // 忽略转换正则匹配项 propList: ['*'] }) ] } 复制代码
完整配置文件可以去git查看 webpack-config
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
算法设计与分析基础
Anany Levitin / 清华大学出版社 / 2007-11 / 59.00元
作者基于丰富的教学经验,开发了一套对算法进行分类的新方法。这套方法站在通用问题求解策略的高度,能对现有的大多数算法进行准确分类,从而使读者能够沿着一条清晰的、一致的、连贯的思路来探索算法设计与分析这一迷人领域。本书作为第2版,相对第1版增加了新的习题,还增加了“迭代改进”一章,使得原来的分类方法更加完善。 本书十分适合作为算法设计和分析的基础教材,也适合任何有兴趣探究算法奥秘的读者使用,只要......一起来看看 《算法设计与分析基础》 这本书的介绍吧!