安装指定版本的webpack npm install webpack@3.6 -g 安装live-server    运行项目插件   输入live-server  运行后自动打开网页 npm install -g live-server webpack.config.js const path = require('path'); module.exports = { entry:{ entry:'./src/entry.js', entry2:'./src/entry2.js' }, out…

1. 安装: //loader加载器加载css和sass模块 cnpm install style-loader css-loader node-sass sass-loader --save-dev //loader加载器加载css和less模块 cnpm install style-loader css-loader less less-loader --save-dev //样式抽离文件 如果是webpack4.X 需要加@next //现在webpack4.x支持mini-css-ext…

1. 安装:主要是用来压缩css文件 cnpm install --save-dev optimize-css-assets-webpack-plugin cssnano 2. webpack.config.js配置 const optimizeCssAssetsWebpackPlugin=require('optimize-css-assets-webpack-plugin'); //压缩css插件配置 new optimizeCssAssetsWebpackPlugin() //暂时不起作用…

一.less文件打包和分离 1.要使用less,首先使用npm安装less服务:还需要安装Less-loader用来打包使用. npm install less --save-dev npm install less-loader --save-dev 2.在module中配置 { test: /\.less$/, use: [{ loader: "style-loader" },{ loader: "css-loader" },{ loader: "le…

1. 安装:打包编译时,可以删除一些html中没有使用的选择器,如果html页面中没有class=a class="b"的元素,.a{}.b{}样式不会加载 cnpm install --save-dev purifycss-webpack purify-css glob 2. webpack.config.js中使用 const purifycssWebpack = require('purifycss-webpack');const glob = require('glob');…

## Webpack的配置和使用 ### 安装 1. 全局安装 ``` npm install webpack -g ``` 2. 本地安装 ``` npm install webpack -D ``` ### 使用 #### 直接通过命令参数来执行 1. 如果是全局安装的 ``` webpack 入口文件 出口文件 ``` 2. 如果是本地安装的 2.1 先在package.json的script标签中添加一条命令(就和全局的命令一模一样) 2.2 通过npm run 命令名 来执行命令 ##…

1. 安装依赖: cnpm install --save-dev url-loader image-webpack-loader html-loader 2. webpack.config.js规则的配置 /* * url-loader:主要是图片处理和Base64编码(base64就是一串加密的字符串,而且base64编码过的图片是没有http请求的) * image-webpack-loader:主要是压缩图片 * */ { test: /\.(png|jpe?g|gif|svg)(\?.*…

webpack.config.js文件通常放在项目的根目录中,它本身也是一个标准的Commonjs规范的模块. var webpack = require('webpack'); module.exports = { entry: [ 'webpack/hot/only-dev-server', './js/app.js' ], output: { path: './build', filename: 'bundle.js' }, module: { loaders: [ { test: /\.…

一.多个入口文件之前我们配置的都是 一个入口 var webpack = require('webpack'); var commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common.js'); module.exports = {     //页面入口文件配置     entry: {         index: './src/index.js'     },     //入口文件输出配置     output: {     …

1.基本配置 webpack在执行时,除在命令行传入参数,还可以通过指定的配置文件来执行.默认会搜索当前目录下webpack.config.js.这个文件是一个node.js模块,返回一个json格式的配置对象,或者通过--config选项来指定配置文件.   //创建webpack.config.js var webpack = require('webpack'); module.exports = {      entry:'./entry.js', //入口文件      output:…