`webpack-cli`报错解决方案

npm install webpack --global 
/*
    全局安装完webpack之后，会提示你需要安装一个`webpack-cli`
*/

在项目的根目录下，直接按照命名提示

/*
    如果直接是以这样的方式安装，那么会报错，即使在本地已经安装成功了
*/
npm install webpack-cli -D

注意：正确的做法

/*
    需要全局安装
*/
npm install webpack-cli --global

最后执行以下命名，查看webpack 的版本

webpack -h

`webpack-dev-server`基本使用

用途：

使用webpak-dev-server 这个工具，来实现自动打包编译的功能

安装方法：

运行 npm install webpack-dev-server -D 把这个工具安装到项目的本地开发依赖
安装完毕后，这个工具的用法，和webpack 命名的用法，完全一样
在项目中，本地安装的依赖，不能使用全局的命名，除非是全局安装的，才可以使用全局的命名，还有另外一种方法是，package.json 的script中，配置执行的脚本
webpack-dev-server 打包生成的bundle.js的文件，并没有存在实际的物理磁盘上，而是直接托管在了电脑的内存中，所以，我们在项目的根目录下，根本找不到bundle.js这个文件
我们可以认为，webpack-dev-server 把打包后的文件，以一种虚拟的形式，托管到了项目的根目录下，虽然我们看不到它，但是可以认为，是和dist/src/node_modules 平级，有一个看不见的文件，bundle.js

/*
    package.json    
*/
"dev": "webpack-dev-server"

/*
    webpack-dev-server 常用命名
    --open 编译完成，自动打开浏览器
*/
"dev": "webpack-dev-server --open"

方法二、在根目录下的webpack.config.js 文件中，配置devServer，配置方法如下：

const webpack = require('webpack');
"devServer": {
    open: true, // 自动打开浏览器
    port: 18080, // 端口号
    contentBase: 'src' // 指定托管的根目录
    hot: true, // 启用热更新  这是热更新的第一步
},
plugins: [ // 配置插件的节点
   new webpack.HotModuleReplacementPlugin() // 这是一个new热更新的模块对象

]

plugins

webpack4+已移除了CommonsChunkPlugin改用SplitChunksPlugin进行替换，默认的配置如下：

var webpack = require('webpack');

module.exports = {
    .... 省略前面
    plugins:[
        new webpack.optimize.SplitChunksPlugin({
            // 配置的信息不变
        })
    ]
}

主要的就是把CommonsChunkPlugin改成SplitChunksPlugin即可。

提取css

extract-loader
ExtractTextWebpackPlugin

安装

npm install extract-text-webpack-plugin --save-dev

webpack.config.js中进行配置

var ExtractTextWebpackPlugin = require('extract-text-webpack-plugin');

module.exports = {
    ...
    module:{
        rules:[
            {
                test: /\.css$/,
                use: ExtractTextWebpackPlugin.extract({
                    fallback: 'style-loader',
                    use: [
                        {
                            loader: 'css-loader',
                            options: {
                                modules: true,
                                localIdentName: '[path][name]_[local][hash]'
                            }
                        }
                    ]
                })
            }
        ]  
    },
    plugins: [
        new ExtractTextWebpackPlugin({
            filename: '[name].min.css'
        })
    ]
}

提取CSS的文件的主要的思想的就是，使用extract-text-webpack-plugin的插件，然后书写提取出的插件的名称，然后就是使用extract属性进行提取，

PostCss

PostCSS
Autoprefixer
CSS-nano
CSS-next

安装

npm install postcss postcss-loader autoprefixer cssnano postcss-cssnext --save-dev

配置

module.exports = {
    module:{
        rules:[
            use: {
                test: /\.css$/,
                use:[
                    {
                        loader: 'postcss-loader',
                        options: {
                            ident: 'postcss',
                            plugins: [
                                require('autoprefixer')()
                            ]
                        }
                    }
                ]
            }
        ]
    }
}

当我们使用引入多个plugin的时候，我们需要定义ident:postcss

js tree shaking

uglifyjs-webpack-plugin 就是压缩JS文件的

安装

npm install uglifyjs-webpack-plugin --save-dev

配置

var uglifyjsWebpackPlugin = 
module.exports = {
    ...
    plugins: [
        new uglifyjsWebpackPlugin();
    ]
}

css tree shaking

安装

npm install purifycss-webpack purify-css --save-dev
npm install glob-all --save-dev

配置

var PurifyCssPlugin = require('purifycss-webpack');
var GlobAll = require('glob-all');

module.exports = {
    ....
    plugins: [
        new PurifyCssPlugin({
            paths: GlobAll.sync([
                path.join(__dirname, './index.html'),
                path.join(__dirname, './src/*.js')
            ])
        })
    ]
}

图片处理

css中引入的图片
自动合成雪碧图
压缩图片
Base64编码

需要使用到的loader：

file-loader
url-loader
img-loader
postcss-sprites

安装

npm install file-loader url-loader img-loader postcss-sprites --save-dev

配置

处理css文件中的图片：

// webpack.config.js
module.exports = {
    ...
    module: {
        rules:[
            {
                test: /\.(jpg|png|jpeg|gif)$/,
                use: [
                    {
                        loader: 'file-loader', // 处理css中图片的loader
                        options: {
                            publicPath: 'dist/', // 公共路径
                            useRelativePath: true // 相对路径
                        }
                    }
                ]
            }
        ]
    }
}

压缩图片：

文件低于指定的文件的大小时，会返回一个DATAURL

// webpack.config.js
module.exports = {
    ...
    module: {
        rules: [
            {
                test: /\.(png|jpg|jpeg|gif)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 1012
                        }
                    }
                ]
            }
        ]
    }
}

`css` 样式处理

注意：webpack 默认只能处理js类型的文件，无法处理其他非JS类型的文件，如果需要处理一些非JS类型的文件，我们需要安装一些合适的第三方loader 加载器。

如果想要打包处理css文件，需要安装 npm install style-loader css-loader -D
需要在webpack.config.js 文件中，新增一个配置节点，module 他是一个对象，在这个对象上，有一个rules 属性，这个属性是一个数组，数组里面存放了第三方文件的匹配和处理规则。

/*webpack.config.js*/
module.exports = {
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
                // 表示使用哪个第三方的loader 做处理
            }
        ]
    }
}

注意：webpack处理第三方文件类型的过程

发现这个文件不是JS文件，然后就去配置文件中，查找有没有对应的第三方loader规则
如果能找到相应的对应规则，就会调用相应的loader处理这个文件类型
在调用loader的时候，是从后往前调用的
当最后一个loader执行完毕，会把处理的结果，直接提交给webpack进行打包合并，最终输出到bundle.js

图片处理

安装相关依赖：

npm install url-loader file-loader --save-dev

/* 其中 file-loader 是url-loader 中的一个loader，
所以在webpack.config.js文件中，不需要直接写file-loader 在use属性哪里 */


/* webpack.config.js */

const path = require('path')

module.exports = {
    module: {
        rules: [
            test: /\.(jpg|png|gif|jpeg|bmp)$/,
            use: 'url-loader'
            // 处理图片路径的url-loader
        ]
    }
}

样式引入

注意：如果通过路径的方式引入node_modules 中的文件，可以直接省略node_modules 这一层目录，后面直接加上包的名称，然后就是具体的文件路径。

不写node_modules 这一层，默认就会去 node_modules 中进行查找

webpack踩坑

webpack-cli报错解决方案

webpack-dev-server基本使用

plugins

提取css

安装

webpack.config.js中进行配置

PostCss

安装

配置

js tree shaking

安装

配置

css tree shaking

安装

配置

图片处理

安装

配置

css 样式处理

图片处理

样式引入

`webpack-cli`报错解决方案

`webpack-dev-server`基本使用

`css` 样式处理