webpack的最简单应用，只使用js与css的打包

最新推荐文章于 2024-06-07 09:52:23 发布

boywgw

最新推荐文章于 2024-06-07 09:52:23 发布

阅读量922

点赞数 1

分类专栏： webpack

webpack 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

文章转载自：http://www.cnblogs.com/huangqiming/p/5961506.html

1、要确保node的版本是否是最新稳定版

2、接着需要packjson.js文件，全部enter掉就好了，默认值就行了

 
         npm init

3、进行全局安装webpack

 
         npm install -g webpack

4、cmd跳转到项目的文件夹，安装webpack

 
         npm install --save-dev webpack

5、接着在项目文件夹接着安装，css-loader 和 style-loader处理样式表

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

6、安装css中图片的loader和svg的依赖

 
         npm install url-loader svg-url-loader --save-dev

7、在项目文件夹新建webpack.config.js，我的内容如下

var webpack = require('webpack');

module.exports = {
    entry: __dirname+'/js/entry.js',
    output: {
        path: __dirname+'/js',
        filename: 'bundle.js'
    },
    module: {
        loaders: [
            {test: /\.css$/,loader: 'style-loader!css-loader'},
            {test: /\.(png|jpg|gif)$/, loader: 'url-loader?limit=8192'},
            {test: /\.svg/, loader: 'svg-url-loader'}
        ]
    }
};

8、在项目文件夹下的js文件夹里新建一个entry.js，我的内容如下（测试用的）

require('./../css/style.css'); // 载入 style.css
require('./index.js');//载入自身想要用的js

9、输出的网页的内容index.html，如下

 
         <!-- index.html --> 
        
         <html> 
        
         <head> 
        
         <meta charset= 
         "utf-8" 
         > 
        
         </head> 
        
         <body> 
        
         <script src= 
         "js/bundle.js" 
         ></script> 
        
         </body> 
        
         </html>