如何用Webpack实现代码打包

初识webpack及环境搭建

• 全局安装

npm install -g webpack

• 准备一个服务器并监听

npm install -g webpack-dev-server

• 打包文件

webpack <需要打包的文件> bundle.js（输出到哪去）

• 持续监听、打包文件

webpack <需要打包的文件> bundle.js（输出到哪去） --watch

webpack 对应 model.exports 和 require()搭配使用
自定义的文件引入时需要./文件位置 系统自带的不需要./

运用第三方库

• 使用第三方插件以使用jQuery为例

cnpm install jquery --save          ——先下载
let $ =require("jquery")           ——再调用

• 静态文件模块化 以css为例

npm install css-loader style-loader --save-dev  先下载

• 引入单个文件

单个文件——require('!style-loder!css-loder!./style.css')

• 引入整体文件

配置webpack入口文件webpack.config.js（必须起这个名字，否则找不到）

内容：
module.exports = {
    // 入口文件
    entry : './app.js',
    // 出后文件
    output : {
        path: __dirname + '/dist',
        filename : "bundle.js"
    },
    // 需要依赖的插件或者装载器
    module :{
        loaders : [
            {test : /\.css$/,loader : "style-loader!css-loader"}
//正则 所有的css都会通过装载器模块化
        ]
    }
}
之后的打包命令就可以直接使用webpack 会找到入口文件

搭建服务器

• 使用webpack-dev-server

npm install -g webpack-dev-server

• 如何使用package.json启动项目

在一个项目中 package.json文件控制了项目的构建方式
我们可以通过修改他来实现自主可控
"scripts": {
    "start": "webpack-dev-server --entry ./app.js --output-filename ./bundle.js",//让项目在服务器端运行 入口文件、出口文件 路径要正确 此后可以通过npm run start命令启动
    "build" : "webpack"//构建项目  npm run build
  },

• 项目中的es6语法不是所有浏览器都兼容，所以我们通过babel来将es6转化为es5

安装：
npm install babel-core babel-loader babel-preset-es2015
三个模块分别是 babel核心插件 装载器 需要预编译的语言
之后我们需要在webpack的入口文件webpack.config.js中编辑
module :{
        loaders : [
            {
                test : /\.js$/,//所有的js文件
                loader : "babel-loader", //使用装载器编译
                exclude : /node_modules/, //排除的文件
                query : {
                    pressets : ["es2015"] //查询预编译的文件
                }
            },
        ]
    }

• 事件传值

现在我们实现了父组件向子组件的传值，那么我们如果需要子组件向父组件传值应该怎么做呢，此时就需要我们借助Output的方法了
我们首先来创建一个组件
ng g c components/addQuestion
然后在add-question.component.html中添加一些内容
就像这样
<div class="card">
  <div class="card-hesder">
    添加问题
  </div>
  <div class="card-block">
    <form (submit) = "addQuestion()">
      <div class="form-group">
        <label for="text">问题</label>
        <input type="text" class="form-control" [(ngModel)] = "text" name="text">
      </div>
      <div class="form-group">
        <label for="text">答案</label>
        <input type="text" class="form-control" [(ngModel)] = "answer" name="answer">
      </div>
      <input type="submit" value="提交" class="btn btn-pramiry">
    </form>
  </div>
</div>