webpack入门笔记

参考链接https://segmentfault.com/a/1190000006178770

 

一.环境

1.node.js v8.4.0 

2.新建项目及文件夹结构

webpack-hello3

　　app //项目程序文件夹

　　　　images //图片文件夹

　　　　index.tmpl.html //项目启动界面模板，依据该模板生成正真的项目启动页面index.html

　　　　main.js //项目的惟一入口程序，也是启动程序

       build //存放编译（打包）后的文件夹

　　

 

3. npm init      //在改文件夹下运行 (生成一个包管理文件package.json)

4. npm install --save-dev webpack //安装webpack

5.package.json文件中配置命令

{

　　"scripts": {

　　　　"test": "echo \"Error: no test specified\" && exit 1",

　　　　"start": "webpack", //运行打包 （npm start 或 npm run start ）

　　　　"server": "webpack-dev-server --open" //运行本地服务 （npm run server ，在浏览器中运行项目）

　　},

}

 npm的start命令是一个特殊的脚本名称，其特殊性表如今，在命令行中使用npm start就能够执行其对于的命令，若是对应的此脚本名称不是start，想要在命令行中运行时，须要这样用npm run {script name}如npm run build

其中 打包和编译的区别，打包是安装打包配置把js进行打包输出，编译是安装编译配置把ts等代码文件编译成.js文件，或对代码进行压缩，优化等。

 

 

二.配置文件及运行本地服务

1.在webpack-hello3文件夹根目录下新建webpack.config.js文件

2.编辑配置文件

module.exports = {

　　

　　entry: __dirname + "/app/main.js",//已屡次说起的惟一入口文件

　　

　　output: {

　　　　path: __dirname + "/build",//打包后的文件存放的地方

　　　　filename: "bundle.js"//打包后输出文件的文件名

　　},

 

　　devServer: {

　　　　contentBase: "./public",//本地服务器所加载的页面所在的目录

　　　　historyApiFallback: true,//不跳转

　　　　inline: true//实时刷新

　　},

 

 

}

 

关于打包成多个js文件的配置

    /*
    * 这样配置全部的js文件都会打包在一个bundle.js文件中
    * 此时 index.html引用
    * <script src="bundle.js"></script>
    entry:__dirname+"/app/main.js", //程序惟一入口文件,
    output:{
        path:__dirname+"/public",//打包后文件存放的地方
        filename:"bundle.js"//打包后输出文件的文件名
    },
     
    */


    /*
    * 要把各js文件分多个文件打包时，须要这样配置
    * 此时 index.html引用
    * <script src="main.js"></script>
    * <script src="gr.js"></script>
    */
    entry:{
        main:__dirname+"/app/main.js", //main 表示程序惟一入口文件
        gr:[__dirname+"/app/Greeter.js"] //这个能够把多个js文件合并成一个gr.js
    },
    output:{
        path:__dirname+"/public",//打包后文件存放的地方
        filename:"[name].js" //这样会分别生成main.js和 gr.js 两个文件
    },

 

 

三.Babel

Babel实际上是一个编译JavaScript的平台，它能够编译代码帮你达到如下目的：

• 让你能使用最新的JavaScript代码（ES6，ES7...），而不用管新标准是否被当前使用的浏览器彻底支持(如 import {} from './main.js') ；
• 让你能使用基于JavaScript进行了拓展的语言，好比React的JSX；

// npm一次性安装多个依赖模块，模块之间用空格隔开 ,

//babel-core babel核心包，babel-preset-env 解析Es6,babel-preset-react解析React的JSX

1.安装babel

npm install --save-dev babel-core babel-loader babel-preset-env babel-preset-react

2.配置babel 

　　{

　　　　test: /(\.jsx|\.js)$/,

　　　　use: {

　　　　　　loader: "babel-loader",

　　　　　　options: {

　　　　　　　　presets: [

　　　　　　　　　　"env", "react"

　　　　　　　　]

　　　　　　}

　　　　},

　　　　exclude: /node_modules/

　　},

 

四.安装react

npm install --save react react-dom

 

五.css

css-loader使你可以使用相似 @import和  url(...)的方法实现  require()的功能

style-loader将全部的计算后的样式加入页面中，两者组合在一块儿使你可以把样式表嵌入webpack打包后的JS文件中。

1.安装

npm install --save-dev style-loader css-loader

2.配置

{
      test: /\.css$/, use: [ { loader: "style-loader" }, { loader: "css-loader", options: { modules: true } } ] }

六.图片

引用形式

1.html文件中直接引用，如：<img src="a.jpg" />

 2.css中，如：.body{background:url(a.jpg)}

3.js中，如：var img = '<img src="a.jpg" />'; document.body.innerHTML = img;

4.ReactJS中，如：render(){

　　　　　　　　　　return (<img src="a.jpg" />);

　　　　　　　　 }

 

webpack中引入图片须要url-loader 这个加载器，而url-loader又依赖file-loader,

而html中的img标签须要html-withimg-loader插件支持，因此须要安装它们,

npm install --save-dev file-loader url-loader html-withimg-loader

 

 增长配置

{

　　test:/\.(png|jpg|gif)$/,

　　use:{

　　　　loader: 'url-loader?limit=8192&name=images/[hash:8].[name].[ext]'

　　　　/*

　　　　loader:"url-loader",

　　　　options:{

　　　　　　limit:50,//图片打包限制，当图片小于50字节时自动转换成base64编码引用，大于50字节时打包

　　　　　　outputPath:'images/' //将打包后图片放到指定文件夹

　　　　}*/

　　}

},

{

　　test:/\.html$/, //解析直接写在html文件中<img>标签

　　use:{

　　　　loader:'html-withimg-loader'

　　}

}

 

 

七.简单优化

 1.分离第三方库，如react

 2.分离js,css(既css单独打包，由于webpack默认会把js,css打包到一个文件)

3.压缩js代码

 

 安装css单独打包插件

npm -save-dev extract-text-webpack-plugin

 

更改css配置

{

　　test: /\.css$/,

　　use:ExtractTextPlugin.extract({

　　　　fallback: "style-loader",

　　　　use: {

　　　　　　loader:"css-loader",

　　　　　　options:{

　　　　　　　　modules:true,//指定启用css modules

　　　　　　　　localIdentName:'[name]__[local]--[hash:base64:5]' //指定css类名格式

　　　　　　}

　　　　}

　　})

},

 

 

plugins:[

　　//分离第三方库，要放在前面

　　new webpack.optimize.CommonsChunkPlugin({name:"vendor",filename:"vendor.bundle.js"}),

　　new HtmlWebpackPlugin({

　　　　template: __dirname + "/app/index.tmpl.html"//new 一个这个插件的实例，并传入相关的参数

　　}),

　　new webpack.optimize.OccurrenceOrderPlugin(),//根据模块调用次数，给模块分配ids，常被调用的ids分配更短的id，使得ids可预测，下降文件大小，该模块推荐使用

　　new webpack.optimize.UglifyJsPlugin(),//压缩js

　　new ExtractTextPlugin("style.css")//分离css

]