webpack配置

模块：

1.node模块 commonjs规范

1.1.引用 

let a=require("./a.js");
//引入当前目录下a.js模块，并赋予值给a变量

let path=require("path");
//引入的是当前目录中node_module path模块，并赋值给path变量

1.2模块定义

1.2.1内置模块   fs,path,server

1.2.2自定义模块  每一个js文件都包含一个模块

1.2.3第三方模块  express,mysql

每一个模块中都有module属性指向当前模块

//我这个是当前模块自己
console.log(module);

//判断当前模块是不是主模块
console.log(require.main===module);

1.3 自定义模块导出

// 求圆的周长与圆的面积
const PI=3.14;
var size=function (r) {
    return PI*r*r;
};
var perimeter=function (r) {
    return 2*PI*r
};
//自定义的属性和方法要导出，别人才可以使用
// exports.size=size;
// exports.perimeter=perimeter;
module.exports={
    size:size,
    perimeter:perimeter
}

//预定义的模块作用域成员：
/*__dirname*/ //当前模块文件所在的目录
/*__filename*/ /*当前模块文件所在的目录及文件名*/
/*module*/    /*指向当前模块的引用*/
/*module.exports={}*//*当前模块中导出的供其他模块使用的对象*/
/*exports*/ /*指向module.exports对象的引用*/
/*require*/ /*引入模块*/

2.前端模块与node模块有类似之处

2.1引入

//当前的a自定义模块
let a=require("./a.js");
//node_module中内置的path模块
let path=require("path");
//引入当前index.css自定义模块
import './index.css';
//引入当前style.less模块
import './style.less';
//引入图片模块，放在page上
import page from './pg2.jpg';

2.2自定义模块

图片/css/less/js/等但需要加载器进行加载

2.3模块导出

 let str="我很帅";
module.exports=str;

let a="我很栓";
let sum=function (num1,num2) {
    alert(num1+num2)
}
// module.exports=a;
module.exports={
    a:a,
    sum:sum
};

let str="我非常帅";
export default str;

3.webpack 打包配置

3.1  下载webpack模块，此时我们使用的是@3版本

window+R =>CMD
npm install webpack -g 全局，可以在命令行中使用(如果不能使用配置环境变量)
webpack或者less最好不要安装全局的，否则则可能会导致webpack版本差异

3.2 npm init -y初始化

  3.2.1.  npm init -y  先初始化
  3.2.2.  npm install webpack@3   --save-dev 添加关联 安装的是3x版本

3.2.3
在package.json中配置一个脚本，这个脚本用的命令是webpack，
拿去当前的node_modules下找bin对应的webpack名字让其执行
，执行的就是bin/webpack.js,webpack.js需要当前目录下有个名字叫webpack.config.js文件，
我们通过nom run build 执行的目录式当前文件的目录，所以会去当前目录查找

"scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "build": "webpack"
  }

3.3 npm run biuld运行

报错：没有找到webpack.config.js文件,创建一个js文件

No configuration file found and no output filename configured via CLI option.

没有找到配置文件，也没有通过CLI选项配置输出文件名。

3.4在当前文件夹创建webpack.config.js文件

var path=require('path');
//输出
module.exports={
//入口模块
    entry:"./src/main.js",
    output:{
        filename:'bundle.js',
        path:path.resolve('./dist')/*必须是一个绝对路径*/
    },
//    模块的解析规则（es6->es5）
//    js匹配所有的js 用babel-loader转义 排除掉node_module
    module:{
        rules:[
            {
                test:/.js$/,
                use:'babel-loader',
                exclude:/node_modules/
            },
            {
                test:/.css$/,
                //从右往左
                use:['style-loader','css-loader']
            },
            {
                test:/.less$/,
                use:[{
                    loader: "style-loader" // creates style nodes from JS strings
                }, {
                    loader: "css-loader" // translates CSS into CommonJS
                }, {
                    loader: "less-loader" // compiles Less to CSS
                }]
            }
            ,
            {
                test: /.(png|jpg|gif)$/,
                use:'url-loader?limit=8124&name=[path][name].[ext]'
            }
        ]
    }
};

3.4es6转义es5

  npm install babel-core --save-dev
  npm install babel-loader --save-dev

让翻译官解析es6语法

 npm install babel-preset-es2015 --save-dev

 创建.babelrc文件，文件内容
  {
    "presets":["es2015"]
  }

webpack.config.js中解析
        rules:[{
                test:/.js$/,
                use:'babel-loader',
                exclude:/node_modules/  //排除node_modules匹配到的
            },]

让翻译官解析es7语法

 babel-presets-npm-0 解析es7语法包含
  npm install babel-preset-stage-0 --save-dev

.babelrc文件  重点
{
  "presets":["es2015","stage-0"]
}

解析CSS

  npm install css-loader style-loader --save-dev

{
                test:/.css$/,
                //从右往左
                use:['style-loader','css-loader']
            }

解析less

预处理语言less/sass/stylus

less-loader less包必须要有 css-loader style-loader

npm install less less-loader --save-dev

{
                test:/.less$/,
                use:[{
                    loader: "style-loader" // creates style nodes from JS strings
                }, {
                    loader: "css-loader" // translates CSS into CommonJS
                }, {
                    loader: "less-loader" // compiles Less to CSS
                }]
            }

解析图片

解析图片
file-loader url-loader (是依赖于file-loader)

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

在JS中引入图片需要import 或者线上路径“http://www.asd.asd”

         {
                test: /.(png|jpg|gif)$/,
                use:'url-loader?limit=8124&name=[path][name].[ext]'
            }

安装解析HTML插件

插件的作用，以我们自己的HTML为模板将打包后的结果，地洞引入到html中产出到dist目录下；

npm install html-webpack-plugin --save-dev

//webpack.config.js文件中

//1.引入第三方模块
var HtmlWebpackPlugin=require('html-webpack-plugin');


module.exports={
//2.在插件中解析
  plugins: [
        new HtmlWebpackPlugin({
            template:'./src/index.html',//src中创建index.html文件
            // filename:"index.html"
        })
    ]
};

运行 npm run build 此时 dist文件创建index.html / bundle.js 此时已经关联了

安装一个webpack服务器插件，可以时时刷新

npm install webpack-dev-server@2 --save-dev

关于版本特点，当你webpack下载的4x的时候， webpack-dev-server必须3x
             当你webpack下载的3x的时候   webpack-dev-server必须2x

配置一个脚本，让他运行

  "scripts": {
    "build": "webpack",
    "dev":"webpack-dev-server"
  },

npm run dev就运行了；可以在dos中找到打开的那个地址比如   http://localhost:8080/

需要安装vue-loader vue-template-compiler
这里安装14版本
vue-loader@14                解析 .vue文件的
vue-template-compiler     用来解析vue模板的

在配置文件中webpack.config.js中配置

         {
            test:/.vue$/,
                use:'vue-loader'
            }