流程

webpack安装

• Step 1: 首先安装Node.js, 可以去Node.js官网下载.

• Step2: 在Git或者cmd中输入下面这段代码, 通过全局先将webpack指令安装进电脑中
  npm install webpack -g

• Step3: 使用Git Bash here 或者 cmd cd命令使当前目录转到当前项目的目录下, 然后输入下面这段命令                          npm init

接下来会弹出一些信息, 就是一些项目名和一些参数的描述, 可以全部按回车使用默认信息, 完成之后项目文件夹下会生成一个package.json的文件 

---

webpack配置

• Step1: 创建项目文件夹, 名字自起, 但路径名不要包含中文, 以及项目名也不要叫”webpack”, 并且不要包含大写字母.
• Step2: 接下来创建并编写配置文件. 首先我们先介绍几个配置文件的参数. 
  • entry： 是 页面入口文件配置 （html文件引入唯一的js 文件）
  • output：对应输出项配置 
    • path ：入口文件最终要输出到哪里，
    • filename：输出文件的名称
    • publicPath：公共资源路径
• Step3: 在你的项目目录下创建webpack.config.js配置文件, 通过这个文件进行webpack的配置, 并且还要创建一些路径保存基本文件. 例如: 

//webpack.config.js
module.exports = {
    entry : './src/js/entry.js',//入口文件
    output : {//输出文件
        filename : 'index.js',//输出文件名
        path : __dirname + '/out'//输出文件路径
    },
}

2、需要安装jquery插件

1、使用命令行npm install jquery来安装jQuery

2、在webpack.config.js文件里配置：

//暴露$和jQuery到全局
	       {
	            test: require.resolve('jquery'), //require.resolve 用来获取模块的绝对路径
	            use: [{
	                loader: 'expose-loader',
	                options: 'jQuery'
	            }, {
	                loader: 'expose-loader',
	                options: '$'
	            }]
	        },

3、安装CSS插件

1、使用命令行 npm install style-loader css-loader --save-dev 

2、在webpack.config.js文件里配置

//CSS
{
	test: /\.css$/,
    use: [ 'style-loader', 'css-loader' ]
},

4、图片依赖

1、命令行

• npm install image-webpack-loader --save-dev
• npm install url-loader --save-dev
• npm install file-loader --save-dev

2、在webpack.config.js文件里配置

{
                test: /\.(gif|png|jpe?g|svg)$/i,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 8*1024
                        }
                    }, {
                        loader: 'image-webpack-loader',
                        options: {
                            mozjpeg: {
                                progressive: true,
                                quality: 75
                            },
                            optipng: {
                                enabled: true
                            },
                            pngquant: {
                                quality: '65-90',
                                speed: 4
                            },
                            gifsicle: {
                                interlaced: false
                            }
                        }
                    }
                ]
            },

5、载入Jquery、样式、图片

//载入jquery
require("jquery");
//载入样式
require('../css/style.css');
//载入图片
var img = document.createElement("img");
img.src = require("../images/small.png");
document.body.appendChild(img);

webpack常用命令

webpack常用命令

• npm install webpack -g   // 全局安装webpack
• npm install webpack --save-dev 或npm install webpack@ --save-dev //本地安装webpack,即下载webpack插件到node_modules 并在package.json文件中加上webpack的配置内容(当你在本地安装 webpack 后，你能够从 node_modules/.bin/webpack 访问它的 bin 版本)
• npm init -y   //初始化默认的package.json文件
• npm install {whatever}-loader  --save-dev   //安装loader并将该loader配置到package.json文件中
• webpack    //对项目进行打包
• webpack   --watch   // 自动监控文件的改变
• webpack  --display-modules  //打包时显示隐藏的模块
• webpack--display-chunks   //打包时显示chunks
• webpack --display-error-details //显示详细错误信息
• webpack -w #提供watch方法，实时进行打包更新
• webpack -p #对打包后的文件进行压缩
• webpack -d #提供SourceMaps，方便调试
• webpack --colors #输出结果带彩色，比如：会用红色显示耗时较长的步骤
• webpack --profile #输出性能数据，可以看到每一步的耗时