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

时间 2019-11-30

标签 webpack 最简单应用使用 css 打包栏目 JavaScript 繁體版

原文原文链接

一、要确保node的版本是不是最新稳定版javascript

二、接着须要packjson.js文件，所有enter掉就行了，默认值就好了css

npm init

三、进行全局安装webpackhtml

npm install -g webpack

四、cmd跳转到项目的文件夹，安装webpackjava

npm install --save-dev webpack

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

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

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

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

七、在项目文件夹新建webpack.config.js，个人内容以下web

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'}
        ]
    }
};

八、在项目文件夹下的js文件夹里新建一个entry.js，个人内容以下（测试用的）npm

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

九、输出的网页的内容index.html，以下json

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

十、最后在命令行cmd中输入webpack就能够自动打包了（可是要记得始终要在原始目录下）svg