webpack(简单安装配置)

webpack

前端工程化: npm、 cnpm、 yarn、 bower|grund、 gulp、webpack

gulp:基于流的任务式的工具,前端自动化构建工具;

webpack是一款模块化打包工具,webpack是基于配置的通过配置一些选项来让webpack执行打包任务。

webpack在打包的时候,依靠依赖关系图,在打包的时候需要告知webpack两个概念:入口和出口;

  1. 全局安装cnpm install webpack -g

  2. 我们需要使用webpack.config.js进行配置

  3. cnpm init 生成配置文件packg.json

  4. 在项目中安装webpack ,cnpm install webpack -D

  5. 在webpack.config.js进行配置
    可以搭配两套配置一个开发,一个生产用

    //暴露配置项

    module.exports = {

    // 配置入口文件

    entry : "./src/main.js",

    //配置出口文件

    output : {

    // 必须绝对路径

    path : __dirname + "/build",

    //加hash做一个简单的版本控制

    filename: "main[hash].js"

    },

    }

  6. 在cmd 中执行webpack执行打包任务

入口entry

entry配置项目打包的入口,值可以为单个的字符串执行某一个文件的地址,这个时候该文件就是入口文件,webpack会根据入口文件里各模块间的关系形成依赖关系图,然后根据依赖关系图进行打包


 entry : "./src/main.js",
​
 //配置出口文件
​
 output : {
​
 // 必须绝对路径
​
 path : __dirname +  "/build",
​
 //加hash做一个简单的版本控制
​
 filename: "main[hash].js",

但是有的时候我们需要的是多入口,我们就写成数组的形式,数组里的每一个字符串地址指向的都是一个独立的入口,webpack会将这些入口的依赖打包

output:{
 path:path.join(__dirname,'build'),
 filename:'[name].js'//不确定名字的时候,这里会打包成main.js
}

刚才的两种entry配置都只会打包出一个js文件,但是在某一个应用中我们可能需要将js根据依赖关系打包成多个js文件,并且在多页面应用中,我们也确实不可能只使用一个js文件,那么我们就可以使用如下的配置:

 entry:{
 app:'./src/app.js',
 vendor:'./src/vendor.js'
 },
 output:{
 path:path.join(__dirname,'build'),
 filename:'[name]_[hash].js'
 }

这样,因为filename里写成名字是[name],所以会根据entry的配置的键名来为打包出的js文件命名,hash是每次打包的一个随机的hash值,可以用来做版本控制

output

在这里我们配置打包输出的一些选项

filename可以确定打包出来的文件的名字,在里面我们可以使用[name],[hash]这样的占位符

path配置打包出去的文件的路径,需要是绝对路径

env

在命令行或者终端中执行 webpack --env dev命令,就相当于在打包的时候传入一个参数为hello

在webpack.config.js中可以暴露出一个函数,这个函数就可以接收到env参数,当然函数就可以根据env参数来有选择的返回某一个或多个配置对象

引入
let devConfig = require("./webpack.dev.js")
let productionConfig = require("./webpack.production.js")
​
module.exports = (env)=>{
 if(env=='production'){
 return productionConfig
 }
 return developmentConfig
}
plugins

在webpack编译用的是loader,但是有一些loader无法完成的任务,交由插件(plugin)来完成,插件的时候需要在配置项中配置plugins选项,值是数组,可以放入多个插件的使用,而一般的插件都是一个构造器,我们只需在plugins数组中放入该插件的实例即可,在实例化插件的时候又可以传入options,对插件的使用进行配置

html-webpack-plugin

这个插件可以选择是否依据模板来生成一个打包好的html文件,在里面可以配置、title、template、filename、minify等选项,详情请查阅文档

在这个插件里,我们可以使用jade、hbs、ejs等模板引擎来编译成html,这里举例jade的配置:

文档

​
module:{
 rules:[
 {
 test:/\.jade$/,
 use:'jade-loader'
 }
 ]
},
plugins:[
 new HtmlWebpackPlugin({
 // title:'webpack-config-demo',
 template:'./src/index.jade',
 filename:'index.html'
 })
]
webpack-dev-server

webpack相辅相成的有一个server功能工具可以提供开发的热更新服务器

npm install webpack-dev-server -gnpm install webpack-dev-server -D

第一种启动方式: 直接执行webpack-dev-server,如果有需要配置的选项,在后面跟上参数即可。例如

webpack-dev-server --hot true

第二种启动方式:在webpack.config.js中配置devServer的选项,执行webpack-dev-server就ok

devServer:{
 port:9000,
 contentBase:'./build',
 historyApiFallback: true,
 open: true,
 proxy:{

 }
}

LOADERS

在webpack中专门有一些东西用来编译文件、处理文件,这些东西就叫loader,loader的使用就是在配置项中,设置modules,在modules中设置rule值为数组,在数组里放入多个匹配规则:

module:{
 rules:[
 {test:/\.css$/,use:'css-loader'}
 ],
 //before
 loaders:[
 {test:/\.css$/,loader:'css-loader'}
 ],
}

test为此次匹配要匹配的文件正则规则,use代表要使用的loader

使用url-loader可以将css中引入的图片(背景图)、js中生成的img图片处理一下,生成到打包目录里

视图html-withimg-loader可以将html中img标签引入的img图片打包到打包目录

file-loader

{
 test:/\.(png|jpe?g|svg|gif)$/,
 // use:'url-loader?limit=1000&name=images/[hash:8].[name].[ext]'
 use:[
 {
 loader:'url-loader',
 options:{
 limit:1000,
 name:'/static/images/assets/[hash:8].[name].[ext]'
 }
 }
 ]
},
{
 test:/\.html$/,
 use:'html-withimg-loader'
}

处理css:

cnpm i css-loader style-loader --save-dev

配置:

{
test:/\.css$/,
use:['style-loader','css-loader']
}

注意。webpack中loader的使用是从后往前的

css-loader可以将引入到js中的css代码给抽离出来,style-loader可以将抽离出来的css代码放入到style标签中

处理sass

{test:/.scss$/,use:['style-loader','css-loader','sass-loader']},

将引入项目的css文件、scss文件抽成一个文件,引入到页面中

cnpm i extract-text-webpack-plugin

const ExtractTextWebpackPlugin = require('extract-text-webpack-plugin')
///loader
{
 test:/\.css$/,
 use:ExtractTextWebpackPlugin.extract({
 fallback: "style-loader",
 use: "css-loader"
 })
},
{
 test:/\.scss/,
 use:ExtractTextWebpackPlugin.extract({
 fallback: "style-loader",
 use: ["css-loader","sass-loader"]
 })
}
///plugin
new ExtractTextWebpackPlugin({
 filename:'app.css',
 allChunks:true
})

因为ExtractTextWebpackPlugin对webpack4支持的不好,所以解决方法

cnpm install extract-text-webpack-plugin@next -D

@next下载的就是最新的版本

webpack-dev-server进行一个优化。开启服务后,会将编译结果保存在内存里,并不会输出打包结果

css兼容:post css loader

处理es6:

需要的依赖:(版本号跟上,配套)"babel": "^6.23.0", cnpm install babel@6.23.0 -D"babel-core": "^6.24.1","babel-loader": "^7.0.0",(配合webpack)"babel-preset-es2015": "^6.24.1","babel-preset-react": "^6.24.1",

rules:{

test:/\.js$/,
exclude: /node_modules/,
loader:'babel-loader',
query: {
 presets: ['es2015','react']
 }
}
ES6中的react

1.创建组件:

使用class来创建组件

class App extends React.Component {

}

2.默认状态的设置

在es6中不再使用getInitialState来设置默认状态,而是在constructor里面直接给this.state上挂载状态

class App extends Component {
constructor(props){
 super(props)

 this.state={
 doing:'吃饭'
 }
}
}
  1. 默认属性的设置

在es6中,通过给类设置defaultProps属性来设置默认属性

App.defaultProps = {
name:'App根组件'
}
  1. 做属性传参验证
import PropTypes from 'prop-types';
App.propTypes = {
name:PropTypes.string
}

5.钩子函数有变化

getDefaultProps、getInitialState没有了

多出了constructor,而这个函数本身是类的构造器,在这里相当于getDefaultProps、getInitialState的结合

create-react-app 脚手架

npm install creat-react-app -g

create-react-app my-app //生成一个react开发模板在my-app目录//生成的过程特别缓慢,可以使用yarn工具来下载,也就是说先去下载安装yarn :npm install yarn -g

cd my-app

npm install

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 213,558评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,002评论 3 387
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 159,036评论 0 349
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,024评论 1 285
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,144评论 6 385
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,255评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,295评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,068评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,478评论 1 305
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,789评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,965评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,649评论 4 336
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,267评论 3 318
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,982评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,223评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,800评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,847评论 2 351

推荐阅读更多精彩内容

  • 版权声明:本文为博主原创文章,未经博主允许不得转载。 webpack介绍和使用 一、webpack介绍 1、由来 ...
    it筱竹阅读 11,082评论 0 21
  • GitChat技术杂谈 前言 本文较长,为了节省你的阅读时间,在文前列写作思路如下: 什么是 webpack,它要...
    萧玄辞阅读 12,682评论 7 110
  • 一、webpack的基本概念 webpack 本质上是一个打包工具,它会根据代码的内容解析模块依赖,帮助我们把多个...
    cilla123阅读 1,536评论 0 8
  • 有谁来安慰 病房里 隔壁床 初生婴孩的哭声 撕心裂肺 惊天动地 除了 伯利恒 马槽里 婴孩的哭声 撕心裂肺 惊天动...
    云轩Richard阅读 539评论 2 1
  • 我有一个时间沙漏 不时流过一两颗 金光闪烁 你帮我捞起 陈列在侧 一颗一颗 代表过去的活着 按下一个快进 我给你一...
    白二丁阅读 151评论 0 3