初识 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 中添加一些内容
就像这样
- <p class="card">
- <p class="card-hesder">
添加问题
- </p>
- <p class="card-block">
- <form (submit) = "addQuestion()">
- <p class="form-group">
- <label for="text"> 问题 </label>
- <input type="text" class="form-control" [(ngModel)] = "text" name="text">
- </p>
- <p class="form-group">
- <label for="text"> 答案 </label>
- <input type="text" class="form-control" [(ngModel)] = "answer" name="answer">
- </p>
- <input type="submit" value="提交" class="btn btn-pramiry">
- </form>
- </p>
- </p>
来源: https://www.2cto.com/kf/201806/755840.html