webpack.config.js用来写测试的基本配置,引入了css-loader以及typescript
2019-06-22 19:34
661 查看
版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/js_push/article/details/93354427
一个较为通用的webpack.config.js配置,引入css-loader以及typescript
本小白在学习菜鸟教程的webpack教程时,照着教程上面写会报很多错,解决了这个错误还会有下一个错误,简直是没完没了,一直在百度,解决了几个bug之后发现了这个
本章节基于 Webpack3.0 测试通过。
突然想打人…
现在的版本基本上是4.35,在node下输入"webpack -v"就可以查看版本号,所以有些东西就不兼容了,于是就到webpack官方文档中去看怎么配置,最后弄了个基本通用的配置,不需要像菜鸟教程上面那么麻烦的敲很多命令行,而且还会报错
module.exports = { mode: "development", entry: "./runoob1.js", output: { filename: "bundle.js", path: __dirname, }, module: { rules: [{ test: /\.css$/, use: [{ loader: "style-loader" }, { loader: "css-loader", options: { modules: true } }] }] } }
上面rules里面的loader是npm下载了的配置,主要是对css进行处理的包,可以改成自己的配置,也可以不要
webpack引入typescript需要npm install ts-loader,引入ts的webpack.config.js的modular部分
module: { rules: [{ test: /\.ts$/, use: "ts-loader" }] }, resolve: { extensions: [ '.ts' ] }
并且配置tsconfig.json
{ "compilerOptions": { "module": "amd", "target": "es5", "sourceMap": true }, "exclude": [ "node_modules" ] }
这样页面就引入了typescript
新手上路,有不对的地方欢迎指正
相关文章推荐
- webpack---webpack.config.js配置基本要素entry、output、loader、plugins等
- 对vue中 默认的 config/index.js:配置的详细理解 -【以及webpack配置的理解】-config配置的目的都是为了服务webpack的配置,给不同的编译条件提供配置
- 对vue中 默认的 config/index.js:配置的详细理解 -【以及webpack配置的理解】
- 对vue中 默认的 config/index.js:配置的详细理解 -【以及webpack配置的理解】-config配置的目的都是为了服务webpack的配置,给不同的编译条件提供配置
- webpack中引入jQuery,webpack.config.js中的配置
- 对vue中 默认的 config/index.js:配置的详细理解 -【以及webpack配置的理解】-config配置的目的都是为了服务webpack的配置,给不同的编译条件提供配置
- (一)webpack配置loader,打包js和sass以及图片文件
- 前端构架配置(二):node.js、 webpack、css-loader、html-loader、style-loader、webpack-dev-server等插件安装总出错解决方式
- webpack - 构建配置文件dev.config.js团队多人合作冲突解决
- webpack中引入的path[require('path')]是node.js内置的package,用来处理路径的。
- webpack.config.js配置详解
- vue-cli的webpack模版,相关配置文件dev-server.js与webpack.config.js配置解析
- package.json/webpackconfig.js 配置属性详解
- webpack4.0.1的安装问题和webpack.config.js的配置
- webpack.config.js配置文件
- Webpack配置详解(package.json/webpack.config.js详细配置 )
- webpack4.0.1安装问题和webpack.config.js的配置变化
- 移动端音乐播放器,因webpack版本没有dev-server这个文件,通过配置config下index.js实现跨域
- Webpack中hash与chunkhash的区别,以及js与css的hash指纹解耦方案
- webpack.config.js配置文件出错提示:Invalid configuration object.