webpack1入门（构建项目）

2017-11-26 本文已影响0人前端小小工程师

1、创建demo文件夹，创建package.json文件

npm init 初始化项目

2、安装webpack包

1.全局安装  cnpm install webpack@1 -g  

2.项目安装  cnpm install webpack@1 --save

3、创建webpack.config.js文件

目录：demo/webpack.config.js

// 引入模块
var webpack = require('webpack');

4、核心模块放置的地方

五大模块：

entry：编辑入口文件，设置1个js入口模块；

output：编辑导出文件；

plugins：配置插件

module:加载的loaders

resolve：配置别名

module.exports = {
}

5、接下来配置所有页面

创建文件夹和文件：

文件目录

6、编辑index.html文件

创建index.html文件

7、编辑index.css文件

body{
  background:pink;
  color:red;
}

8、编辑index.js文件

var s=function(data) {
     console.log(data);
}
module.exports.fn=s;

9、编辑app.js文件

var index=require('./index.js');
require('../stylesheets/index')
index.fn('init index');

10、编辑webpack配置文件：

10.1配置入口和输出文件：

module.exports={
         entry:__dirname+"/src/scripts/app.js",   //值可为对象，或者单个字符串组合
         output:{
                 path:__dirname+"/build",    //编译后的文件路径

                filename:"/scripts/[name]-[hash].js"  // 输出文件的路径
         }
}
//执行webpack命令 输出了js文件

10.2 配置 html文件，需要以插件形式进行配置

1.安装html-webpack-plugin模块
（参考：https://www.npmjs.com/package/html-webpack-plugin ）
cnpm install html-webpack-plugin --save-dev

2.配置plugins

 module.exports = {       
    entry: __dirname + "/src/scripts/app.js",
      //值可为对象，或者单个字符串组合        
        output: {                        
        path: __dirname + "/build",
           //编译后的文件路径                
                 filename: "/scripts/[name]-[hash].js"  // 输出文件的路径        
                 
    },
    plugins: [  //配置插件 
            new HtmlWebpackPlugin({        
            filename: 'index.html',
              //文件名
                    template: __dirname + '/src/index.html'   //文件的相对路径
                    
        })
    ]
}
//执行webpack命令 输出了js文件

10.3资源处理 module 模块，css 处理后实际上会被打包到 js 里：

1.下载style-loader和css-loader模块

    cnpm install style-loader --save-dev

    cnpm install css-loader--save-dev

2.配置module

module:  {  
    loaders: [        {                
            test: /\.css$/,
                 // 正则匹配所有以.css文件结尾的文件
            loader: 'style-loader!css-loader'        
        }    
    ]
 }
 //在小黑窗执行： webpack