webpack教程

时间 2019-11-07

标签 webpack 教程繁體版

原文原文链接

1.安装

先装好node和npm，由于webpack是一个基于node的项目。而后javascript

npm install -g webpack

2.创建项目

建一个文件夹，而后新建一个package.json的文件在项目根目录下css

mkdir testwebpack
cd  testwebpack
npm init

2.1询问一些问题:按回车选择默认值自动生成文件

package.json
 package name: (webpack-test)   包名(demo)
 version: (1.0.0)               版本
 description:                   描述
 entry point:                   入口程序(main.js)
 test command:                  测试指令("dev": "webpack-dev-server","build": "webpack -p")
 git repository:                node_modules
 keywords:                      关键字
 author:                        做者
 license: (ISC) MIT             MIT
 Is this ok? (yes)              yes

3.在建立webpack.config.js

module.exports = {
  entry: './main.js',  /*你要打包的js文件*/
  output: {
    filename: 'bundle.js'  /*打包后生成的文件*/
  },
   module: {
rules:[
  {
    test: /\.css$/, /*引入css文件配置*/
    use: [ 'style-loader', 'css-loader' ]
  },
]
  },
  module: {
rules:[
  {
    test: /\.(png|jpg)$/, /*引入图片文件配置*/
    use: [
      {
        loader: 'url-loader',
        options: {
          limit: 8192
        }
      }
    ]
  }
]
 }
};

3.1例如个人main.js里写

document.write('<h1>Hello World</h1>');

require('./app.css');

var img = document.createElement("img");
img.src = require("./small.png");
document.body.appendChild(img);

3.2查看打包好后使用的JS则建立html文件

<html>
  <body>
    <script type="text/javascript" src="bundle.js"></script>
  </body>
</html>

4.建立服务器

npm i -g webpack webpack-dev-server

5.安装依赖关系。

npm install

6.打包

npm run dev

webpack教程

1.安装

2.创建项目

2.1询问一些问题:按回车选择默认值 自动生成文件

3.在建立webpack.config.js

3.1例如个人main.js里写

3.2查看打包好后使用的JS则建立html文件

4.建立服务器

5.安装依赖关系。

6.打包

2.1询问一些问题:按回车选择默认值自动生成文件