随笔分类 - npm webpack
摘要：1.项目中我们经常要引用别人的包，很多时候我们使用的仅仅是别人包里面的几个方法或者样式，如果打包的时候将别人的包整个打包进行，就多了很多无用的代码，所以需要将这些无用的代码去掉。 2.去掉无用的js代码：这个功能webpack已经自带了，前提是我们要用es6的方式引用和导出包，并且打包的模式要为pr
阅读全文
摘要：1.配置了dev-server的好处是，可以将我们打包后的文件作为一个后台服务启动，然后在浏览器中打开启动的地址就可以浏览我们打包出来的网页了。并且可以在我们代码改动后自动重新打包刷新网页。就不用我们每次手动打包，打包后需要自己找到打包后的文件在浏览器打开。 2.安装包：npm install we
阅读全文
摘要：1.使用eslint-loader对js文件进行语法检查，eslint-loader可以配置很多种不同的语法检查规则，这里使用airbnb-base语法规则进行检查 2.安装包：npm install eslint-loader eslint eslint-config-airbnb-base es
阅读全文
摘要：1.进入网页：https://www.iconfont.cn/，登录后找到自己想要的图标，点击购物车图标添加入库，然后选择下载代码。 2.下载下来的是一个压缩文件里面有很多不同后缀的文件。在我们的项目下新建一个svg的文件夹，将下载的文件除了demo开头的两个文件其他全部拷贝到svg文件夹下。 3.
阅读全文
摘要：1.图片的引用在css文件中，比如在之前的inde.css文件中添加如下属性：background-image: url('../img/1.jpg'); 安装包：npm install url-loader file-loader -D 然后再webpack.config.js中配置： const
阅读全文
摘要：1.安装插件：npm install optimize-css-assets-webpack-plugin -D 2.在webpack.config.js中引入使用该插件： const{resolve}=require('path'); const HtmlWebpackPlugin = requi
阅读全文
摘要：1.安装包：npm install postcss-loader postcss-preset-env -D 2.在根目录下新建一个postcss.config.js文件，这个文件作为插件postcss-loader的配置文件，文件中添加代码： module.exports={ plugins:[
阅读全文
摘要：1.之前打包css的方式我们使用style-loader，这里loader用于将js中的css代码引入html，引入的方式是在html中新建script标签，将css以代码的方式放入这个标签中。 如果我们希望像平常使用的那样，将js中的css代码提取到一个css文件中，再在html中用引入文件的方式
阅读全文
摘要：1.打包less需要下载包less和less-loader：npm install less less-loader -D 2.打包sass需要下载包node-sass和sass-loader：npm install node-sass sass-loader -D 3.在（4）的基础上新增一个in
阅读全文
摘要：1.这里打包css的方式使用css-loader和style-loader，css-loader用于将js中引入的css打包在一起，style-loade用于将js中引入的css引入到html中。 2.首先安装css-loader和style-loader：npm install css-loade
阅读全文
摘要：现有文件：src/index.html，src/cart.html，src/js/jquery.js，src/js/common.js，src/js/index.js，src/js/cart.js。 要求：将jquery.js和common.js打包在一起生成一个chunk，作为通用库，index.
阅读全文
摘要：1.上面讲了打包js文件，这些打包出来的js文件需要引入到html文件中，如果一个个都需要我们手动在html中加入script标签来引用就麻烦了。 这里用webpack打包html的好处有： （1）可以自动将打包后的js文件引入html （2）html打包后依然会生成在build文件夹下和打包后的j
阅读全文
摘要：1.配置多个入口文件，但是打包为一个chunk，生成一个js文件 const{resolve}=require('path'); module.exports={ entry:['./src/index.js','./src/main.js'],//使用数组的方式将多个入口放在其中 output:{
阅读全文
摘要：1.接上面（1）中的代码 2.在demo0目录下新建一个webpack.config.js文件，这个文件是webpack打包默认的配置文件，当然你也可以不叫这个名字，但是不是这个名字的话就需要在执行webpack命令的时候显示的告诉它你的配置文件的名字 3.webpack.config.js这个文件
阅读全文
摘要：1.首先确保已经安装了node和npm 2.新建一个文件夹demo0，在demo0目录下执行npm init -y。该命令可以生成package.json配置文件 3.在demo0目录下执行：npm install webpack webpack-cli -D。该命令用于安装webpack 和web
阅读全文
摘要：npm config get registry：查看当前包下载地址 npm config set registry https://registry.npm.taobao.org：切换为淘宝镜像 npm config set registry https://registry.npmjs.org：改
阅读全文
浙公网安备 33010602011771号