webpack基础

1、npm install webpack -g
2、打包js：webpack 打包的js(entry.js) 打包后js(bundle.js)
但是每次都这样手动打包很麻烦，官方就除了类似composer的配置文件
文件名叫webpack.config.js,编写好配置文件直接输webpack就打包了

3、想要在项目中使用jquery，并且通过webpack打包：
	npm init //生成初始化文件package.json
	npm install jquery --save-dev //安装jquery
	代码中：
	require('../css/style.css')  //引入css
	$ = require('jquery')
	$('h1').html('is true');
	【注1】：只有在用到的js引入就可以了，相对于传统js优势很大
    引入css

4、配置babel，es6：
	import $ from 'jquery'
	$('h1').html('is true');




配置：
webpack.config.js :
module.exports = {
    devtool: "sourcemap",
    entry: "./js/entry.js",
    output: {
        filename:"bundle.js"
    }
};
npm 安装相关 loader：
css-loader style-loader babel-core babel-loader babel-plugin-transform-runtime babel-preset-es2015 babel-preset-stage-0 babel-runtime --save-dev

webpack.config.js :
module.exports = {
    devtool: "sourcemap",
    entry: "./js/entry.js",
    output: {
        filename:"bundle.js"
    }，
    module: {
        loaders: [
            {//如果后缀是css,就是用style,css的loader来处理
                test: /\.css$/,
                loader: "style-loader!css-loader"
            }，
            {   //babel配置使用es6语法写js
                test:/\.js$/,
                loader:"babel-loader",
                 //忽略掉这个文件夹下的
                exclude:/node_modules/,  
                options: {
                    presets: ['es2015','stage-0'],
                    plugins: ['transform-runtime']
                }
            }
        ]
  }
};



webpack.config.js

const path = require("path")
module.exports = {
    entry:{
        app:path.join(__dirname,'../client/app.js'),
    },
    output:{
        filename:"[name].[hash].js", 
        //name就是entry中的名字，在这里就是app  
        //hash是打包后每个文件根据内容会又一个hash值，浏览器根据hash判断是否需要重新缓存
        path:path.join(__dirname,'../dist'), 
        //打包到哪里
        publicPath:'/public', 
        //打包后的静态资源目录
    }
}