从零开始搭建webpack+react开发环境的详细步骤

环境主要依赖版本

webpack@4.8.1
webpack-cli@2.1.3
webpack-dev-server@3.1.4
react@16.3.2
babel-core@6.26.3
babel-preset-env@1.6.1
bable-preset-react@6.24.1

webpack安装及配置

1. 起步

新建项目目录，初始化npm，新建开发源目录

2.webpack-cli

webpack从4.x版本开始，需要同时安装webpack，webpack-cli(此工具用于在命令行中运行webpack)。

3.wepback配置文件

在项目根目录新建webpack.config.js文件，此文件为webpack运行核心文件。

webpack.config.js 基本配置

module.exports = {
entry: './src/index.js',// 入口文件
output: { // webpack打包后出口文件
filename: 'app.js',// 打包后js文件名称
path: path.resolve(__dirname,'dist') // 打包后自动输出目录
}
}

package.json 文件 scripts配置

此时在命令行运行npm run build，就能执行webpack了，webpack会自动去找项目根目录里的webpack.config.js文件，执行打包。

文件 └── webpack.config.js

webpack.config.js module相关配置

webpack 视所有文件都为模块，图片，css文件，字体等静态资源都会打包进js文件，所以会需要用到loader文件，更多Loaders可以查询网址，接下来我们安装一些必要的Loader文件。

css-loader url-loader --save-dev

webpack.config.js加入module模块

css-loader'] },{ test: /\.(png|svg|jpg|gif)$/,use: ['url-loader'] },{ test: /\.(woff|woff2|eot|ttf|otf)$/,use: ['url-loader'] } ] } }

引入loader后，就可以在你的src/index.js文件import你想引入的css文件或者其他静态资源。

src/index.js 文件引入css

webpack.config.js plugins配置

主要的js文件和静态文件都能成功打包成一个js文件后，我们需要把这个js文件放到html文件里，webpack插件***html-webpack-plugin***就是干这个事儿的，它能自动生成一个html文件并把我们打包好的js文件放入html。

webpack.config.js 配置plugins

插件

module.exports = {
entry: './src/index.js',use: ['url-loader']
}
]
},plugins: [
new HtmlWebpackPlugin({title: 'production'}) // 配置plugin
]
};

执行npm run build后，我们可以看到dist目录多出一个index.html文件。

<Meta charset="UTF-8"> name // 打包后的app.js已经被自动插入了html文件

从零开始搭建webpack+react开发环境的详细步骤

环境主要依赖版本

webpack安装及配置

webpack.config.js module相关配置

webpack.config.js plugins配置

猜你在找的JavaScript相关文章