1.0.3 • Published 6 years ago

yhhtml-cli v1.0.3

Weekly downloads
5
License
MIT
Repository
github
Last release
6 years ago

提示npm install webpack-cli -D 用全局安装 -g

全局安装且在项目中高版本插件,想要降低版本,必须全局卸载且在项目卸载

安装html-loader可以提取公共模板,使用方法:<%= require("html-loader!./layout/head.html") %>

url-loader处理图片,还需安装file-loader

过程总结

1、搭建项目结构

2、用npm init初始化,安装webpack

3、webpack.config.js配置

 1、出入口(注意多文件)

 2、引用jquery时模块化

 3、各种loader使用

 4、各种插件使用

     1、公共模块提取webpack.optimize.CommonsChunkPlugin,最好使用webpack1,4中已废弃此插件

     2、css单独打包extract-text-webpack-plugin

     3、处理html,以便全部打包进dist、此处比较好的是可以采用html-loader将html模块化,比如提出公共部分,需要的地方<%= require("html-loader!./
        layout/head.html") %>引入
        
     4、热更新webpack-dev=server,为了区分开发环境和生产环境,采用node环境变量配置,WEBPACK_ENV = process.env.WEBPACK_ENV || 
        'dev',是生产环境是往公用模块注入热更新,config.entry.common.push('webpack-dev=server/client?http://localhost:8088/'),运行windows: 
        参见packge.json, mac: WEBPACK_ENV=dev webpack-dev-server --inline --port 8088, 编译:同理