webpack入门

最近开始学习webpack的正确打开姿势,先总结一下webpack一些比较重要的入门配置,在博客的最后会有完整的webpack.config.js的栗子。

1.什么是webpack
WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其转换和打包为合适的格式供浏览器使用

2.工作方式
把你的项目当做一个整体,通过一个给定的主文件(如:index.js),Webpack将从这个文件开始找到你的项目的所有依赖文件,使用loaders处理它们,最后打包为一个(或多个)浏览器可识别的JavaScript文件

3.使用准备
进入项目根目录

npm init
npm install webpack --save-dev [--no-optional]

*最新版本npm需要添加–no-optional选项,我当前npm版本是5.3.0
*–save-dev意思是把模块装到当前项目中,init初始化后在
项目根目录会有node_modules文件夹,模块就装到这个文件夹中
4.使用webpack

webpack {entry file} {destination for bundled file}

*{extry file}填写入口文件的路径
*{destination for bundled file}填写打包文件的存放路径
*填写路径的时候不用添加{}
这里写图片描述

5.通过配置文件使用webpack
在项目根目录下新建webpack.config.js
webpack.config.js文件内容:

module.exports = {
  entry:  __dirname + "/app/main.js",//唯一入口文件
  output: {
    path: __dirname + "/public",//打包后的文件存放的地方
    filename: "bundle.js"//打包后输出文件的文件名
  }
}

在终端执行webpack

entry的几种写法

1.entry:"url"
2.entry:["url","url",....]
3.entry:{
    namea:"url",
    nameb:"url",
    ......
   }

output多输出

output:{
    filename:"[name].js"/"[hash].js"/"[chunkhash].js",
    path:"..."
}

output将js、index.html生成到不同路径

output:{
    path:"./dist",
    filename:"js/[name].js"
}

//index.html生成到dist目录,js生成到dist/js目录下

output publicPath参数

output:{
    path:"./dist",
    filename:"js/[name].js",
    publicPath:"http://cdn.com/"
}

//html中引用js的路径变为http://cdn.com/js/[name].js

6.更快捷的执行打包
npm引导任务执行
修改package.json中的script

"scripts": {
    "start":"webpack"
}

在终端输入npm start即可

*package.json 是npm的配置文件,webpack.config.js 是webpack的配置文件

7.生成source maps
在配置文件webpack.config.js中配置devtool,有四种不同的选项
这里写图片描述

8.使用webpack构建本地服务器
功能:浏览器监听代码修改,并自动刷新显示修改后的结果
安装为项目依赖:npm install –save-dev webpack-dev-server
这里写图片描述

添加以上设置到webpack配置文件
在npm配置文件中的script对象中添加:

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack",
    "server": "webpack-dev-server --open"
  }

在终端输入npm run server即可在本地的8080端口查看结果
*这里我发现如果在win10下ctrl+c退出其实服务器尚未关闭,再次运行服务器会发现端口改变(未指定端口)或者报错(指定端口),访问原端口依然可以看见项目

9.html-webpack-plugin的使用
先通过npm安装

npm install html-webpack-plugin --save-dev --no-optional

再在webpack.config.js中引入该插件

var htmlWebpackPlugin=require("html-webpack-plugin");

在module.exports中配置plugins选项

plugins:[
    new htmlWebpackPlugin({
      template:"index.html",//参照的模板html
      filename:"index.html",//生成html文件名称
      inject:"body"//js文件插入到head还是body
    })
  ]

传递参数

plugins:[
    new htmlWebpackPlugin({
      template:"index.html",//参照的模板html
      filename:"index.html",//生成html文件名称
      inject:"body",//js文件插入到head还是body
      title:"plugins中设置的title",
      date:new Date()
    })
  ]

在模板html中,通过<%= htmlWebpackPlugin.options.title %>的形式获取参数

如果需要把不同js插入到html的不同位置
inject设为false
在对应位置插入script标签,src写为<%= htmlWebpackPlugin.files.chunks.js_name.entry %>

压缩html文件
在plugins中配置minify,具体配置参照https://www.npmjs.com/package/html-webpack-plugin

处理多页面应用

entry:{
    main:"./app/main.js",
    a:"./app/a.js",
    b:"./app/b.js",
    c:"./app/c.js"
}
plugins:[
    new htmlWebpackPlugin({
      template:"index.html",//参照的模板html
      filename:"index.html",//生成html文件名称
      inject:"body",//js文件插入到head还是body
      title:"plugins中设置的title",
      date:new Date(),
      chunks:["main","a"]
      //指定该html需要引入的chunk,值为数组,可以使用excludeChunks排除不需要的chunk
    }),
    new htmlWebpackPlugin({
      template:"index.html",
      filename:"b.html",
      inject:"body",
      title:"this is b.html",
      date:new Date(),
      chunks:["b"]
    }),
    new htmlWebpackPlugin({
      template:"index.html",
      filename:"c.html",
      inject:"body",
      title:"this is c.html",
      date:new Date(),
      chunks:["c"]
    })
  ]

webpack.config.js实例

var htmlWebpackPlugin=require("html-webpack-plugin");

module.exports={
  devtool:"eval-source-map",
  entry:{
    main:"./app/main.js",
    a:"./app/a.js",
    b:"./app/b.js",
    c:"./app/c.js"
  },//已多次提及的唯一入口文件
  output:{
    path:__dirname+"/public",//打包后的文件存放的地方
    filename:"js/[name].js"//打包后输出文件的文件名
  },
  devServer:{
    contentBase: "./public",//本地服务器所加载的页面所在的目录
    historyApiFallback: true,//不跳转
    inline: true,//实时刷新
    port:8080
  },
  module:{
    rules:[
      // {test:/\.css$/,use:['style-loader','css-loader']}
    ]
  },
  plugins:[
    new htmlWebpackPlugin({
      template:"index.html",//参照的模板html
      filename:"index.html",//生成html文件名称
      inject:"body",//js文件插入到head还是body
      title:"plugins中设置的title",
      date:new Date(),
      chunks:["main","a"]
      //指定该html需要引入的chunk,值为数组,可以使用excludeChunks排除不需要的chunk
    }),
    new htmlWebpackPlugin({
      template:"index.html",
      filename:"b.html",
      inject:"body",
      title:"this is b.html",
      date:new Date(),
      chunks:["b"]
    }),
    new htmlWebpackPlugin({
      template:"index.html",
      filename:"c.html",
      inject:"body",
      title:"this is c.html",
      date:new Date(),
      chunks:["c"]
    })
  ]
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值