在上面的src路径引入的bundle.js文件是不存在的,因为还没有创建,在使用webpack进行创建打包之后的js文件,如下面所示命令进行创建:

webpack ./index.js bundle.js

在执行完上面命令之后,我们就可以在浏览控制台中看到打印出的结果 Hello world

这样,我们就实现了简单项目的实现原理,打包内容为bundle.js,我们能够看到打包之后的内容,在这里就不贴代码了.

当然,如果我们写代码都是这样去构建,那么,作用意义也不大,这就不得不提及webpack的另外一个优点了,那就是配置文件的使用,在使用配置文件之前,我们在进行安装样式加载器,如下面命令:

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

通过上面的配置,我们就能够进行样式的加载

然后我们进行webpack配置文件设置,需要首先在项目下创建文件webpack.config.js文件,其中内容如下所示:

var path = require('path');

module.exports = {

entry: path.join(__dirname, 'index'),

output: {

path: __dirname,

filename: 'bundle.js'

},

module:{

loaders: [

{

test: /\.css$/,

loaders: ['style-loader', 'css-loader']

}

]

}

};

在上面代码中,

* entry: 表示项目的入口文件

* output: 表示构建打包之后的结果输出,在输出的对象中仍有多项配置比如上面所使用http://的输出路径和输出文件名

* module.loaders是对于模块中的loader使用的配置,值为一个数组,数组的每一项指定一个规则,规则的test字段是正则表达式,若被依赖模块的ID符合该正则表达式,则对依赖进行使用loader转换.这样,我们就能够使用webpack命令进行代码的转换

更多详细说明请参见(//jb51.net/article/136710.htm)

如下面命令行命令就可以进行代码的打包工作webpack

通过执行上面命令,同样能够实现文件的打包,并且,在显示文件时也能够将样式进行显示,为了证明样式确实能够被引入,我们进行创建index.css文件,其中内容如下所示:

body {

background-color: darkgray;

}

然后在我们之前创建的index.js中引入,修改之后的代码如下所示:

// import style from './index.css';

var style = require('./index.css');

var text = require('./hello');

console.log(text);

在上面代码中,注释掉的是node模块的导入形式,而使用中的是CommonJS的使用规范,使用同样的命令打包之后,我们能够在浏览器中看到如下效果:

也就是样式进行了展现.

当然,webpack也能够通过webpack-dev-server进行项目的实时构建.

使用如下命令进行webpack-dev-server的安装:

npm install webpack-dev-server --save-dev

在安装之后,我们能够配置使用服务器,首先,我们的package.json文件将会更为下面这样,新增内容为:

"scripts": {

"test": "echo \"Error: no test specified\" && exit 1",

"start":"webpack-dev-server --inline"

},

在添加完这行命令之后,我们就可以使用下面命令进行启动webpack-dev-server服务器了,

npm run start

之后完整的package.json为如下:

{

"name": "react-basics-review",

创建Main.js

document.write("Hi webpack4 + ES6!");

配置webpack.confiGQpPSKCqDZg.js

var path = require('path');

var appPath = path.resolve(__dirname, './src/Main.js');

var buildPath = path.resolve(__dirname, './build');

module.exports = {

entry: appPath,//整个页面的入口文件

output: {

path: buildPath,//打包输出的地址

filename: "bundle.js",//输出的文件名称

},

module: {

}

}

在命令行输入

webpack --mode development

bundle.js

webpack --mode development

bundle.js

webpack4中引入了生产和开发模式,生产模式可以实现各种优化。 包括缩小，规模提升，tree-shaking等等,开发模式针对速度进行了优化，只不过是提供未缩小的捆绑包

我们使用ES6的语法来试一试

//Main.js