上文我们讲到了options的配置和获取数据的方式，本文，我们继续深入options的配置一、html-webpack-plugin插件中的options除了自己定义了一些基本配置外，我们是可以任意的添加自定义的数据webpack.dev.config.js文件: 1var HtmlWebpackPlugin = require(‘html-webpack-plugin‘);2 module.exports = {3 entry : {4 main : ‘./src/js/main.js‘,5 calc : ‘./src/js/calc.js‘6 },7 output : {8//__dir...
还记得我们上文中的index.html文件吗? 那里面的script标签还是写死的index.bundle.js文件，那么怎么把他们变成动态的index.html文件，这个动态生成的index.html文件会动态引入我们打包后生成的js文件呢？，我们可以使用插件html-webpack-plugin，首先安装这个插件npm install html-webpack-plugin --save-dev，好的，接下来就开始用这个插件了官方参考文档：插件通用用法：https://webpack.js.org/configuration/plugins/#pluginsh...
我们接着上文，那么在上篇文章的最后，写到了css-loader的用法，如果你用心发现，就能看到我在style.css样式文件中写了一个这样的样式：div {transition: all ease 1s;}一、这是一个css3的过渡样式，我们知道，写css3的时候，需要加上浏览器前缀. 那么我们着这里就需要安装postcss-loader和autoprefixer插件安装postcss-loader: npm install postcss-loader --save-dev安装autoprefixer: npm install autoprefixer --save-dev 在de...
我们通常在做项目时可能会把第三方库打包到bundle中，比如下面这张图如果不想把第三方库打包到bundle中，这就有了externals。官方的使用externals比较简单 externals 官网文档解释的很清楚，就是webpack可以不处理应用的某些依赖库，使用externals配置后，依旧可以在代码中通过CMD、AMD或者window/global全局的方式访问。 只需三步—— 1.在HTML中引入第三方库的cdn 2.在webpack中配置externals externals: {jquery: "jQuery", }3....
webpack，我想大家应该都知道或者听过，Webpack是前端一个工具,可以让各个模块进行加载,预处理,再进行打包。现代的前端开发很多环境都依赖webpack构建，比如vue官方就推荐使用webpack.废话不多说，我们赶紧开始吧. 第一步、安装webpack 新建文件夹webpack->再在webpack下面新建demo->命令行切换到demo目录，使用npm init --yes 初始化项目的package.json文件，然后执行npm install webpack --save-dev第二步、全局安装webpack(3.5....