一、在项目中使用jquery
-
1、安装包
npm install jquery 复制代码
-
2、在入口文件单独使用一个
// 定义入口文件 let entry = { vendor: 'jquery', }; 复制代码
-
3、在打包
html
插件的时候引入glob.sync('./src/*.html').forEach(item => { const filename = path.basename(item).toLowerCase(); const chunk = filename.replace('.html', ''); entry[chunk] = `./src/${chunk}.js`; HtmlPlugin.push( new HtmlWebpackPlugin({ filename: filename, template: path.resolve(item), inject: 'body', title: 'webpack测试', chunks: [chunk, 'vendor'], // 手动引入vendor hash: true, minify: { removeAttributeQuotes: true, // 去除引号 collapseWhitespace: false, // true代码合并成一行 } }) ) }) 复制代码
-
4、在插件处配置
plugins: [ new webpack.ProvidePlugin({ $: 'jquery' }), // 使用jquery cssExtract, lessExtract, new webpack.HotModuleReplacementPlugin(), // 热更新,每次修改后会自动刷新 new CleanWebpackPlugin(), // 每次打包清空dist文件夹 ...HtmlPlugin, new PurifycssWebpack({ paths: glob.sync(path.resolve('src/*.html')) }) ], 复制代码
-
5、直接在
js
文件中引入console.log($); $(function () { $('#box').on('click', function () { console.log('你点击了我') }) }) 复制代码
二、使用bootstrap
样式库
-
1、安装
npm install url-loader -D // bootstrap中有使用字体的引入 npm install bootstrap 复制代码
-
2、配置规则
module: { rules: [ ... { test: /\.(eot|woff|woff2|ttf)$/, use: [ { loader: 'url-loader', options: { limit: 5 * 1024 } } ] } ] }, 复制代码
-
3、配置别名
resolve: { extnesions: ['.js', '.json'], // 引入模块的时候,可以不需要使用扩展名 alias: { // 配置别名,在文件引入的时候就可以直接使用bootstrap,不需要引入下面一大串 'bootstrap': 'bootstrap/dist/css/bootstrap.css', } } 复制代码
-
4、
js
文件中引入样式require('bootstrap'); 复制代码
-
5、页面中使用
<button type="button" class="btn btn-success">按钮</button> 复制代码
三、使用webpack
配置react
的开发
-
1、安装包
npm install react react-dom 复制代码
-
2、安装
babel
相关的包(会在下一个章节重点讲解)npm i @babel/core babel-loader @babel/preset-env @babel/preset-react -D 复制代码
-
3、在项目的根目录下创建一个
.babelrc
的文件{ "presets": [ "@babel/preset-env", "@babel/preset-react" ] } 复制代码
-
4、配置规则
module: { rules: [ { test: /\.jsx?$/, exclude: /node_modules/, // 不处理node_modules文件夹 use: [ { loader: 'babel-loader', // 自动会去读取.babelrc的配置 } ], }, ... ] } 复制代码
-
5、运行项目