webpack入门与基本操作

1.全局安装

npm install -g webpack@3

2.在项目中安装

npm install --save-dev webpack@3

3.配置package.json文件

npm init

4.配置webpack.config.js文件

代码：
        //引入path模块，node环境中自带的模块
        const path = require("path");
        module.exports = {//模块暴露
            entry : "./src/entry.js",//入口文件配置项（相对路径即可）
            output : {
                path : path.resolve(__dirname,"dist"),
//（必需使用绝对路径，__dirname为path中获取项目绝对路径的属性）
                filename : "bundle.js"
            }
        }
    说明：
        源文件（入口文件）一般放在src目录下
        打包后的文件（出口文件）一般放在dist目录下

5.测试打包项目：

运行命令：   
    方式一：webpack
    方式二：package.json的script中添加自定义字段属性，值为webpack
        如："start" : "webpack"
        运行：npm run start
    方式三：自动监听
        package.json的script中添加自定义字段属性，值为webpack --watch
        如："autoStart" : "webpack --watch"
    方式四：自动监听
        命令：webpack --watch  
    退出自动监听：ctrl+c

6.插件html-webpack-plugin 自动生成index.html

安装该插件命令：
    npm install --save html-webpack-plugin 
修改webpack.config.js文件让插件生效
    const htmlWebpackPlugin = require("html-webpack-plugin");//引入插件模块
    plugins : [
        new htmlWebpackPlugin() //创建插件，应用对象
    ]
执行命令webpack将会自动生成一个index.html文件
如果修改这个index.html文件，运行webpack的时候，修改后的内容将会被重新生成的index.hmtl覆盖
要使修改后的index.html不被覆盖需要在插件构造函数中传递如下内容：   
    filename : "newIndex.html",//输出新文件
    template : "dist/index.html"//修改的html文件
    即：
        plugins : [
            new htmlWebpackPlugin({
                filename : "newIndex.html",//输出新文件
                template : "dist/index.html"//修改的html文件
            }) 
        ]

7.js文件合并

require("js文件路径")//可导入其它js的代码
第三方js文件也可用module.exports = {}的方式暴露模块
var obj = require("js文件路径")//接收暴露的模块

8.样式打包，安装loader加载器 可以将静态的样式文件一同打包到bundle.js文件中

安装：
    npm install --save css-loader
    npm install --save style-loader

在entry.js中导入样式
require("!style-loader!css-loader!../css/style.css");//静态资源导入需要加！，必须先导入style-loader

9.压缩js文件

webpack内置了压缩插件，存放在webpack的optimize对象下
webpack.config配置文件中
1. 引入webpack模块
var webpack = require('webpack')
2. 获取压缩插件对象
var UglifyJsPlugin = webpack.optimize.UglifyJsPlugin;
3. plugins中添加一个插件对象
new UglifyJsPlugin();