（笔记）webpack安装、配置、简单的项目打包、插件介绍

目录

一、webpack安装、配置

二、项目打包流程

三、用过的插件记录

---

一、webpack安装

1.安装node.js(其自带软件管理包 npm)

node.js官网：node.js
npm（在这可查很多有用的API）：npm
webpack官网（英文网）：webpack

2.安装webpack

打开命令行（window下：运行-cmd），
键入：npm install webpack -g

---

二、项目打包流程

1.进入项目目录()（window下：cd xxx/xxx/xxx）

2.打开命令行，

①键入(必须在项目根目录进行)：npm init 创建package.json文件（若有了则跳过）
②查看webpack版本信息：npm info webpack
③安装webpack：npm install webpack --save-dev （感觉在第一步做过了，预防万一，再安装一次）
④在项目根目录创建 webpack.config.js 配置文件，此文件是整个打包的核心
（如果想要放进已有的配置文件，命令行中键入webpack --config 文件名）
⑤创建静态资源文件夹dist，此文件夹用于放置打包后的文件（项目根目录？）

3.webpack.config.js 文件的配置

基本的入口出口：

module.exports ={
    entry: 'a.js',
    output:{
       filename:'new.js',
       path:'./dist/js'
    }
    module:{
       loaders:[{},{}]
    }
    plugins:[]
}

其中entry是文件入口的意思，它可以有三种配置方式：

/*第一种，单一文件*/
entry: "a.js"
/*第二种，多个js文件打包为同一个文件*/
entry:["a.js","b.js"]
/*第三种，打包为几个不同的文件（传入对象）*/
entry: {
   main : "a.js",
   other : ["b.js","c.js"]  
}

output（出口）的简单介绍：

   filename: "xx.js"  
   //输出文件名，可以输出带有路径的：
   filename: "./dist/js/xxx.js"
   //若要输出多个文件，可插入[name]、[hash]等：
   filename:"./dist/js/[name].js" //此时根据entry对象的命名生成文件名
----------
    path: ""
    //文件输出的路径、这个参数有点诡异 ——dirname?
    publicpath:""
    //待弄懂
----------

module常用法：

 module: {
        loaders: [
        {
              test: /\.css$/,
              loaders: ['style-loader', 'css-loader']
              //处理css文件用的loader,需要在命令行里安装插件
              //npm install style-loader css-loader --save-dev
       }
       , {
              test: /\.(gif|jpg|png|woff|svg|eot|ttf)\??.*$/,
              loader: ['url-loader?limit=8192&name=../dist/img/[name].[ext]']
              //处理图片、字体文件用的loader,需要在命令行里安装插件
              //npm install url-loader --save-dev
       }
      ]
    }

插件plugins（这里仅写 html-webpack-plugin 插件，此插件用語html的交互）
首先，要在webpack.config.js 的头部建立
var htmlWebpackPlugin = require('html-webpack-plugin');
同时，要在命令行安装插件
npm install html-webpack-plugin --save-dev

 plugins: [
        new htmlWebpackPlugin({
            template: './html/index.html',
            //这个的意思是模板文件，可带有路径
            filename: './index-[hash].html',
            //根据模板创立的filename,带有输出路径
            inject: 'head',
            //打包后的js(css)文件放哪，可选'head'/'body'/false(不插入)
            chunks: ['main', 'other'],
            //分支，若有多个输出，可在此处选择插入哪些文件
            minify:{
                collapseWhitespace:true,
                removeComments:true
            }
            //压缩 collapseWhitespace 意思的移除空格
            //removeComments 意思是移除注释
        })]

4.确定打包

三种方法
①：命令行里输入

webpack --config webpack.config.js --progress --display-modules --color --display-reasons
//--xxx,控制显示具体步骤

②：也可以直接命令行高输入webpack这是快捷方式
③：不过通常做法是，修改package.json文件的scripts

//原始的
"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  }
//添加快捷方式
"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "webpack": "webpack --config webpack.config.js --progress --display-modules --color --display-reasons"
  }  
//之后只要在命令行
`npm run webpack` 
即可配置文件进行压缩  

未完待续。。。